CODEWITHSUNDEEP
javascriptjqueryhtml
Mika H.
Mika H.

Reputation: 4339

Cannot close dialog on JSFiddle

I've tried the following on JSFiddle

HTML:

<div id="dialog" title="Basic dialog">
  <p>Hello.</p>
</div>

<a href="www.google.com">Link</a>

JavaScript

$(document).ready(function() {
    $( "#dialog" ).dialog({ autoOpen: false }); 
    $(document.body).on('click',"a",function(event){ 
        event.preventDefault();        
        $("#dialog").dialog('open');
    });  
});

I cannot close the dialog when I hit the close button. Why is it?

Upvotes: 1

Views: 95

Answers (2)

Pointy
Pointy

Reputation: 413996

You're reopening the dialog when the close click bubbles up to the document level. The dialog close [x] is an <a> too.

Add this line to that "click" handler, at the very beginning:

    if ($(this).hasClass('ui-dialog-titlebar-close')) return;

Alternatively, you could make your "open dialog" link more specific, by giving it a class or something:

    <a href=# class=open-dialog>Link</a>

Then:

    $('body').on('click', '.open-dialog', function(event) {
      event.preventDefault();
      $('#dialog').dialog('open');
    });

By making the link to open the dialog distinct from the close button, you get around the ambiguity.

Upvotes: 2

pes502
pes502

Reputation: 1597

You must define CLOSE function:

HTML 

<div id="dialog" title="Basic dialog">
  <p>Hello.</p>
</div>

<a id="open" href="www.google.com">Link</a>

JavaScript 

$(document).ready(function() {

    $( "#dialog" ).dialog({ autoOpen: false });

    $(document.body).on('click',"#open",function(event){ 
        event.preventDefault();        
        $("#dialog").dialog('open');
    });   

    $(document.body).on('click',".ui_icon_closethick",function(event){ 
        event.preventDefault();        
        $("#dialog").dialog('close');
    }); 
});

Working solution: http://jsfiddle.net/QTqUr/1/

Upvotes: 0

Related Questions