I Created A Dialog, Now How Can I Close It?

Question

I have included a link to my site below for review of the JS in the head section, as well as to allow YOU to see how I set it all up. If you don\'t want to use the link, I\'ll a

Answer 1

You can remove it from the dom using

element.parentNode.removeChild(element);

or you can set the display style of the element to 'none' and then you can play with it and create open-close

Answer 2

If you don't want to show it again, you could call

document.getElementById('div2').remove();

in the onclick method of the close button.

Or if you might use it again, call

document.getElementById('div2').style.display = 'none';

To call the close function from the href attribute:

<a href="javascript: CloseDialog();">Nope, Get This Out of The Way</a>

Answer 3

If you're using jquery, you could do it with the "live" method. That will attach event handlers to any new elements that appear on the page even after an ajax request. So if you gave the close bit a class:

<a href="#" class="close_dialog">Nope, Get this out of the way</a>

You could use this bit if jquery:

$('.close_dialog').live('click', function(){ $('.DoYouHaveADirtBikeForSaleBox').remove(); });

Hope that helps :-)

Answer 4

Or you can try this:

<div class="DoYouHaveADirtBikeForSaleBox" id="DoYouHaveADirtBikeForSaleBox">
    <h2>Got A Dirt Bike You Want to Sell?</h2>
    <p class="DirtBikeForSaleBannerButton">
    <a href="http://classifieds.your-adrenaline-fix.com/add.php">Yea, Show Me How</a>
    </p>

    <p class="DirtBikeForSaleBannerButtonNoThanks">
    <a onclick="javascript:document.getElementById('DoYouHaveADirtBikeForSaleBox').style.visibility='hidden';">Nope, Get This Out of The Way</a>

    </p> 
</div>

Tested on my localhost xD

___________EDITED_______________

Better try this and see if the scroll doesnt show the div again:

<div class="DoYouHaveADirtBikeForSaleBox" id="DoYouHaveADirtBikeForSaleBox">
    <h2>Got A Dirt Bike You Want to Sell?</h2>
    <p class="DirtBikeForSaleBannerButton">
    <a href="http://classifieds.your-adrenaline-fix.com/add.php">Yea, Show Me How</a>
    </p>

    <p class="DirtBikeForSaleBannerButtonNoThanks">
    <a onclick="javascript:var div = document.getElementById('DoYouHaveADirtBikeForSaleBox');div.parentNode.removeChild(div);">Nope, Get This Out of The Way</a>

----------------------------UPDATE2---------------------------------

   <div id='div2'>
    <div class="DoYouHaveADirtBikeForSaleBox" id="DoYouHaveADirtBikeForSaleBox">
    <h2>Got A Dirt Bike You Want to Sell?</h2>
    <p class="DirtBikeForSaleBannerButton">
    <a href="http://classifieds.your-adrenaline-fix.com/add.php">Yea, Show Me How</a>
    </p>

    <p class="DirtBikeForSaleBannerButtonNoThanks">
    <a onclick="javascript:var div = document.getElementById('div2');div.parentNode.removeChild(div);">Nope, Get This Out of The Way</a>

    </p> 
    </div>
    </div>

Saludos ;)

Answer 5

you can make button inside div2 and add onClick attribute like this:

<button onclick="document.getElementById('div2').style.display='none'">Close</button>