Close a modal window

Question

I'm calling a login using a modal window (its in Worpress, but the log in for another service). I'm trying to add a button to get the modal window to close - it looks like it should work, but its not... any ideas?

Here's the js I'm using:

<script type="text/javascript">
function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
$(function(){// document.ready shorthand
    $('.close-btn').click(function() {
        $('#overlay,.login-popup').fadeOut('3000',function(){//use 3000 in place of 300m
            $('#overlay').remove();
        });    
        return false;
    });
});

</script>

The html for the close button:

<a class="close-btn" href="#">Close</a>

And the css:

#overlay {
 visibility: hidden;
 position: absolute;
 left: 0px;
 top: 0px;
 width:100%;
 height:100%;
 text-align:center;
 z-index: 1000;
 background-image:url(../background_trans.png);
 background-repeat:repeat;
}

#overlay_content {
 width:275px;
 width:19.64285714rem;
 margin: 100px auto;
 background-color: #ebf1e3;
 border:1px solid #ccc;
 padding:25px;
 text-align:left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
line-height:175%;
}

The relevant html I'm using: The button to call the modal window: `onclick="overlay()"` This is the website I am working on. It's the orange button on the top right: [link]http://www.ridgelinepro.com/website/ and to close it: `Close` — Leaky Eddie, Feb 24 '14 at 23:45

score 0 · Answer 1 · answered Feb 24 '14 at 22:57

Dont remove() the overlay element, just hide it with visibility:hidden and set the .html() to null, but ONLY if you want to erase what's currently inside the modal window.

Source: I recently did something similar (read the elements.js source code and travel around the grid to initiate the modal popup) (http://fooscript.com/zombie/)

Here is the code I used to clear my modal

clearModal : function() {
    this.modal.innerHTML = null;
    this.triggerOverlay();
},
//when called, triggers the visibility of the overlay that disables the page
//modal window
triggerOverlay : function() {
    this.overlay.style.visibility = (this.overlay.style.visibility == "visible") ? "hidden" : "visible";
},

Thanks for the quick response, but I'm not clear on how implement it. What should I change `$('#overlay').remove();` to? — Leaky Eddie, Feb 24 '14 at 23:11

Close a modal window

1 Answers1