Open Jquery modal dialog on click event

2019-01-22 03:24发布

站内问答 / jQuery
1388 6 5

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? 

<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条回答
疯言疯语
2楼-- · 2019-01-22 03:28

May be helpful... :) 

$(document).ready(function() {
    $('#buutonId').on('click', function() {
        $('#modalId').modal('open');
    });
});
查看更多
0人赞 添加讨论(0) 举报
男人必须洒脱
3楼-- · 2019-01-22 03:31

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 

<h3 id="clickMe">Open dialog</h3>
<textarea cols="0" rows="0" id="myText" style="display:none">Some hidden text display none</textarea>
查看更多
0人赞 添加讨论(0) 举报
▲ chillily
4楼-- · 2019-01-22 03:40 
$(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.

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

查看更多
0人赞 添加讨论(0) 举报
做自己的国王
5楼-- · 2019-01-22 03:47

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:

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

</Div>
查看更多
0人赞 添加讨论(0) 举报
女痞
6楼-- · 2019-01-22 03:50

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() .

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>
查看更多
0人赞 添加讨论(0) 举报
Melony?
7楼-- · 2019-01-22 03:53

try

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

there is a open arg in the last part

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)