在单击事件上打开 Jquery 模态对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/964482/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open Jquery modal dialog on click event
提问by Sumanta
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>
回答by almog.ori
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
回答by TigerTiger
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>
回答by Lucas Welander
$(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，然后关闭模态，如果再次按下模态链接，它会使用 .remove 返回 undefined。
With .hide() it doesnt and it works like a breeze. Ty for the snippet in the first hand!
使用 .hide() 它不会，它就像微风一样工作。Ty 是第一手的片段！
回答by Rahul Kumar
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>
回答by Kalpesh Desai
May be helpful... :)
可能会有所帮助... :)
$(document).ready(function() {
$('#buutonId').on('click', function() {
$('#modalId').modal('open');
});
});
回答by dwlorimer
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>
