CODEWITHSUNDEEP
javascriptjqueryhtml
user1394925
user1394925

Reputation: 752

how to close a modal window using a button click

I have a modal window but I want to set up a close function so that when the user clicks on the "button", it will close the modal window. Does anyone know how this can be achieved?

I have a link to the application so you can view it here

Below is the javascript code where it shows the function of opening the modal window and the setup function of where I want to place the code to close the modal window:

function plusbutton() {
    $(".previouslink").modal(); 
    return false;
}
function closewindow() {    
    return false;
}

Below is the form code where user clicks on the plus button and it displays the content within the "previouslink" div tag:

<form id="QandA" action="imageupload.php" method="post">
    <h1>CREATING QUESTIONS AND ANSWERS</h1>
    <table id="plus" align="center">
        <tr>
            <th><a onclick="return plusbutton();">
<image src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage"/>
            </a><span id="plussignmsg">(Click Plus Sign to look <br />
            up Previous Questions)</span> </th>
        </tr>
    </table>
    <div class="previouslink">
        <h1>PREVIOUS QUESTIONS</h1>
        <button type="button" id="close" onclick="return closewindow();">Close
        </button></div>
</form>

Upvotes: 0

Views: 64704

Answers (2)

adamdehaven
adamdehaven

Reputation: 5920

I've used this jQuery reveal modal plugin on several sites and it has worked great for me.

Alternatively, you should check out jQuery Impromptu. I love the tour feature myself, but the modals are more likely what you are trying to accomplish.

The code from both examples will probably lead you to what you are specifically looking for :)

Upvotes: 0

Lukx
Lukx

Reputation: 1283

Your Live-Example shows me, that you seem to be using SimpleModal

From the documentation:

CLOSING THE DIALOG

SimpleModal will automatically bind the close function (using the onclick event) to any element inside the dialog with the simplemodal-close class. In addition, you can programmatically close the currently opened dialog by calling $.modal.close();

Means: In your closeWindow()-Function, you could simply enter the line:

$.modal.close();

and be done.

Upvotes: 5

Related Questions