CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Diego
Diego

Reputation: 964

Dialog closes automatically after opening with jquery

I am modifying this example I found about creating modals.

I want to use javascript for showing the dialog. The code I have it opens me the dialog, but it closes after 1 or 2 seconds. Checking the console I'm not getting no error.

This is the html code. I have a jsbin where you can observe the dialog closing automatically. http://jsbin.com/UDIGeveg/1/edit

<body>
    <a id="openModal" href="">Open Modal</a>
    <div id="openM" class="modalDialog">
        <div>
            <a href="#close" title="Close" class="close">X</a>
            <h2>Modal Box</h2>
            <p>xxxxxxxxxxxxxxxxxxxxxx</p>   
        </div>
    </div>
</body>

This is my javascript

$('#' +"openModal").click(function(){
  document.location.href='#'+"openM";
});

Upvotes: 0

Views: 541

Answers (2)

dcodesmith
dcodesmith

Reputation: 9614

$('#' + "openModal") is an anchor tag and it's default action is to direct you to another link. So you need to prevent its default action from being triggered by using e.preventDefault()

$('#' +"openModal").click(function(e){
  e.preventDefault();
  document.location.href='#'+"openM";
});

Upvotes: 3

Kim T
Kim T

Reputation: 6416

you can use the library to detect the url change for you!

<a id="openModal" href="#openM">Open Modal</a>

and then comment out your javascript:

/*
$('#' +"openModal").click(function(){
    document.location.href='#'+"openM";
});
*/

Upvotes: 0

Related Questions