以下のコードは、最初のクリックイベントに対してのみ正常に機能します。ただし、その後のクリックでは何も起こりません。私はこれをFirefox、すなわち7でテストしましたが、それでも同じです。何か不足していますか?
<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>
試してみる
$(document).ready(function () {
//$('#dialog').dialog();
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
return false;
});
});
最後の部分にオープン引数があります
これを試して
$(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>
$(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
});
.remove()の代わりに.hide()を使用することをお勧めします。 .remove()を使用すると、リンクを1回押した場合にundefinedを返し、モーダルを閉じ、モーダルリンクをもう一度押すと、.removeでundefinedを返します。
.hide()を使用すると、動作せず、簡単に動作します。最初のスニペットのタイ!
ダイアログにページを入れたい場合は、これらを使用できます
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>
役立つかもしれません... :)
$(document).ready(function() {
$('#buutonId').on('click', function() {
$('#modalId').modal('open');
});
});
ダイアログ行の前にこの行を追加してみてください。
$( "#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>