单击事件打开Jquery模式对话框

The below code works fine for only the first click event. However for any subsequent click nothing happens. I tested this on firefox, ie7 but still the same. Am I missing something?

以下代码仅适用于第一次单击事件。但是对于任何后续点击都没有任我在firefox上测试了这个，ie7但仍然是相同的。我错过了什么吗？

<script type="text/javascript">
$(document).ready(function() {
    //$('#dialog').dialog();
    $('#dialog_link').click(function() {
        $('#dialog').dialog();
        return false;
    });
});
</script>    
</head><body>
   <div id="dialog" title="Dialog Title" style="display:none"> Some text</div>  
   <p id="dialog_link">Open Dialog</p>  
</body></html>

6 个解决方案

#1

try

尝试

$(document).ready(function () {
    //$('#dialog').dialog(); 
    $('#dialog_link').click(function () {
        $('#dialog').dialog('open');
        return false;
    });
});

there is a open arg in the last part

最后一部分有一个开放的arg

#2

Try this

尝试这个

    $(function() {

$('#clickMe').click(function(event) {
    var mytext = $('#myText').val();


    $('<div id="dialog">'+mytext+'</div>').appendTo('body');        
    event.preventDefault();

        $("#dialog").dialog({                   
            width: 600,
            modal: true,
            close: function(event, ui) {
                $("#dialog").remove();
                }
            });
    }); //close click
});

And in HTML

在HTML中

<h3 id="clickMe">Open dialog</h3>
<textarea cols="0" rows="0" id="myText" style="display:none">Some hidden text display none</textarea>

#3

$(function() {

$('#clickMe').click(function(event) {
    var mytext = $('#myText').val();

    $('<div id="dialog">'+mytext+'</div>').appendTo('body');        
    event.preventDefault();

        $("#dialog").dialog({                   
            width: 600,
            modal: true,
            close: function(event, ui) {
                $("#dialog").hide();
                }
            });
    }); //close click
});

Better to use .hide() instead of .remove(). With .remove() it returns undefined if you have pressed the link once, then close the modal and if you press the modal link again, it returns undefined with .remove.

最好使用.hide（）而不是.remove（）。使用.remove（），如果您按下链接一次，则返回undefined，然后关闭模态，如果再次按下模态链接，则返回undefined with .remove。

With .hide() it doesnt and it works like a breeze. Ty for the snippet in the first hand!

使用.hide（）它没有，它像微风一样工作。 Ty为第一手的片段！

#4

If you want to put some page in the dialog then you can use these

如果要在对话框中放置一些页面，则可以使用这些页面

function Popup()
{
 $("#pop").load('login.html').dialog({
 height: 625,
 width: 600,
 modal:true,
 close: function(event,ui){
     $("pop").dialog('destroy');

        }
 }); 

}

HTML:

HTML：

<Div id="pop"  style="display:none;">

</Div>

#5

May be helpful... :)

可能会有所帮助...... :)

$(document).ready(function() {
    $('#buutonId').on('click', function() {
        $('#modalId').modal('open');
    });
});

#6

Try adding this line before your dialog line.

尝试在对话行之前添加此行。

$( "#dialog" ).dialog( "open" );

This method worked for me. It seems that the "close" command messes up the dialog opening again with only the .dialog() .

这种方法对我有用。似乎“关闭”命令仅使用.dialog（）再次打开对话框。

Using your code as an example, it would go in like this (note that you may need to add more to your code for it to make sense):

以您的代码为例，它会像这样（请注意，您可能需要在代码中添加更多内容才能使其有意义）：

    <script type="text/javascript">
$(document).ready(function() {
    //$('#dialog').dialog();
    $('#dialog_link').click(function() {
$( "#dialog" ).dialog( "open" );        
$('#dialog').dialog();
        return false;
    });
});
</script>    
</head><body>
   <div id="dialog" title="Dialog Title" style="display:none"> Some text</div>  
   <p id="dialog_link">Open Dialog</p>  
</body></html>

#1

try

尝试

$(document).ready(function () {
    //$('#dialog').dialog(); 
    $('#dialog_link').click(function () {
        $('#dialog').dialog('open');
        return false;
    });
});