Disappearing elements with modal messages using jQuery UI

Could someone help me understand whats going on here, Ive just started using Jquery UI, as soon as I click a link and call the function, the link disappears? even after the dialog has been closed? When I remove the "javascript:void(0);" in the href the dialog appears for one second, without even waiting for me to close it? Am I missing something? all help is greatly appreciated.

$(function() 
{
    $(".dialog").click(function() {
    $( "#dialog:ui-dialog" ).dialog( "destroy" );
   开发者_开发百科     $( "#dialog-modal" ).dialog({
            height: 140,
            modal: true,
        });
    });
});


<div id="dialog-modal" title="Basic modal dialog">
<a href="javascript:void(0);" class="dialog"><p>Text here</p></a>
</div>

Your issue is that the link you are using to open the dialog is actually inside the dialog. Move the anchor outside of the div.

<div id="dialog-modal" title="Basic modal dialog">

</div>

<a href="javascript:void(0);" class="dialog"><p>Text here</p></a>

Add a return false; to the end of the click event handler to avoid the page reloading just after processing the dialog creation

$(function() 
{
    $(".dialog").click(function() {
    $( "#dialog:ui-dialog" ).dialog( "destroy" );
        $( "#dialog-modal" ).dialog({
            height: 140,
            modal: true,
        });
    });
    return false; //<-- Prevent default event handling
});