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

时间:2009-06-08 11:38:46

标签: jquery modal-dialog

以下代码仅适用于第一次单击事件。但是对于任何后续点击都没有任 我在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 个答案:

答案 0 :(得分:29)

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

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

答案 1 :(得分: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>

答案 2 :(得分: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()如果你按下一次链接,则返回undefined,然后关闭模态,如果你再次按下模态链接,它将返回undefined with .remove。

使用.hide()它没有,它像微风一样工作。 Ty为第一手的片段!

答案 3 :(得分: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>

答案 4 :(得分:1)

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

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

答案 5 :(得分:0)

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

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

这种方法对我有用。似乎“关闭”命令仅使用.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>