JQuery Click Event Problem

Question

Im creating modal popup using jquery. Im firing the modal pop up through button click event and the corresponding code here

 $(document).ready(function () {
            $("#Button1").click(function () {
                el = document.getElementById("overlayDiv");
                el.style.visibility = "visible";
                el1 = document.getElementById("progress");
                el1.style.visibility = "visible";
                el2 = document.getElementById("image");
                el2.style.visibility = "hidden";
            });
        });

This works when I click the button at first, after that it doesnt works.

Thanks, Hari.

Answer 1

visibility and display (used by .hide()) are different. Instead of visibility: hidden, in your CSS use display: none, then you can use jQuery's show()/hide() functionality like this:

$("#Button1").click(function () {
   $("#overlayDiv, #progress").show();
   $("#image").hide();
});​

It sounds like you're using .hide() to hide the modal, if that's the case, this will fix the issue. Also, a bit less code :)