点击事件打开jQuery模态对话框

Question

点击事件打开jQuery模态对话框

24

以下代码仅适用于第一次点击事件，但是再次点击时没有任何反应。

我在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>

- Sumanta

6个回答

12

试试这个

    $(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
});

在 HTML 中

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

- TigerTiger

很棒的解决方案 - 我喜欢这个！ - Guy

是的，.remove() 函数就是我的救星。当我调用 .close() 时，它会导致问题。 - IgorGanapolsky

5

$(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
});

最好使用 .hide() 而不是 .remove()。使用 .remove() 如果您按下链接一次，然后关闭模态框，再次按下模态框链接，则返回未定义值。而使用 .hide() 则可以像风一样运行，没有这个问题。感谢第一手的片段!

- Lucas Welander

如果你只是隐藏它，那么#dialog div将会一遍又一遍地被添加。 - ymakux

2

如果你想在对话框中显示某些页面，那么你可以使用以下方法：

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

        }
 }); 

}

HTML：

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

</Div>

- Rahul Kumar

1

也许有帮助... :)

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

- Kalpesh Desai

0

在你的对话行之前尝试添加这一行。

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

这种方法对我很有效。似乎“close”命令会使得对话框只使用.dialog()再次打开时出现问题。

以您的代码为例，它将像这样进行（请注意，您可能需要添加更多代码才能使其有意义）：

    <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>

- dwlorimer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- almog.ori · Accepted Answer

尝试

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

在最后一部分中有一个open参数。