jqueryでダイアログボックスを作ろうと思っています。このダイアログボックスには、利用規約を表示するつもりです。問題は、ダイアログボックスが最初の一回だけ表示されることです。
これがコードです。
JavaScriptを使用しています。
function showTOC()
{
$("#TOC").dialog({
modal: true,
overlay: {
opacity: 0.7,
background: "black"
}
})
}
HTML (a href)です。
<a class="TOClink" href="javascript:showTOC();">View Terms & Conditions</a>
<div id="example" title="Terms & Conditions">1..2..</div>
問題は、ダイアログボックスを閉じると、DIVがhtmlコードから破壊され、画面に二度と表示されなくなることだと考えています。
助けていただけますか!?
ありがとうございます
私も同じ問題(ダイアログが一度だけ開き、閉じた後は二度と開かない)に遭遇し、上記の解決策を試しましたが、私の問題は解決されませんでした。私はドキュメントを読み返し、ダイアログの動作について根本的に誤解していたことに気づきました。
$('#myDiv').dialog() コマンドは、ダイアログを作成/インスタンス化しますが、必ずしもそれを 開く ための正しい方法とは限りません。正しい開き方は、dialog()でダイアログをインスタンス化し、dialog('open')で表示し、dialog('close')で閉じたり隠したりする方法です。つまり、autoOpenオプションをfalseに設定するのがよいでしょう。
つまり、ドキュメントの準備完了時にダイアログをインスタンス化し、クリックやダイアログを表示させたいアクションを待ち受けるという流れです。そうすれば、何度でもうまくいくはずです。
<script type="text/javascript">
jQuery(document).ready( function(){
jQuery("#myButton").click( showDialog );
//variable to reference window
$myWindow = jQuery('#myDiv');
//instantiate the dialog
$myWindow.dialog({ height: 350,
width: 400,
modal: true,
position: 'center',
autoOpen:false,
title:'Hello World',
overlay: { opacity: 0.5, background: 'black'}
});
}
);
//function to show dialog
var showDialog = function() {
//if the contents have been hidden with css, you need this
$myWindow.show();
//open the dialog
$myWindow.dialog("open");
}
//function to close dialog, probably called by a button in the dialog
var closeDialog = function() {
$myWindow.dialog("close");
}
</script>
</head>
<body>
<input id="myButton" name="myButton" value="Click Me" type="button" />
<div id="myDiv" style="display:none">
<p>I am a modal dialog</p>
</div>
あなたが投稿したコードに問題があるようです。T&Cを表示する関数が、間違ったdiv idを参照しているのです。ドキュメントが読み込まれたら、onclick属性にshowTOC関数を割り当てることを検討する必要があります。
$(document).ready({
$('a.TOClink').click(function(){
showTOC();
});
});
function showTOC() {
$('#example').dialog({modal:true});
}
jQuery UIダイアログを使用した、より簡潔な例です。
<div id="terms" style="display:none;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<a id="showTerms" href="#">Show Terms & Conditions</a>
<script type="text/javascript">
$(document).ready(function(){
$('#showTerms').click(function(){
$('#terms').dialog({modal:true});
});
});
</script>
私も同じ問題を抱えており、解決する方法を探していたところ、ここにたどり着きました。RaeLehmanからの提案を検討した結果、解決策を導き出すことができました。以下は、私の実装です。
$(document).readyイベントで、ダイアログを初期化し、autoOpenをfalseに設定しました。また、クリックイベントをボタンのような要素にバインドして、ダイアログを開くようにしました。
$(document).ready(function(){
// Initialize my dialog
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
"OK":function() { // do something },
"Cancel": function() { $(this).dialog("close"); }
}
});
// Bind to the click event for my button and execute my function
$("#x-button").click(function(){
Foo.DoSomething();
});
});
次に、関数が定義されていることを確認し、そこでダイアログを開くメソッドを実装しています。
var Foo = {
DoSomething: function(){
$("#dialog").dialog("open");
}
}
ちなみに、IE7とFirefoxでテストしてみましたが、問題なく動作しました。お役に立てれば幸いです。
1つのページで複数のダイアログボックスを使用して開き、閉じて再度開く必要がある場合は、次の作業で十分です。
JS CODE:
$(".sectionHelp").click(function(){
$("#dialog_"+$(this).attr('id')).dialog({autoOpen: false});
$("#dialog_"+$(this).attr('id')).dialog("open");
});
HTML:
<div class="dialog" id="dialog_help1" title="Dialog Title 1">
<p>Dialog 1</p>
</div>
<div class="dialog" id="dialog_help2" title="Dialog Title 2">
<p>Dialog 2 </p>
</div>
<a href="#" id="help1" class="sectionHelp"></a>
<a href="#" id="help2" class="sectionHelp"></a>
CSS:
div.dialog{
display:none;
}
<script type="text/javascript">
// Increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$('#dialog1').dialog({
autoOpen: false,
show: 'blind',
hide: 'explode'
});
$('#Wizard1_txtEmailID').click(function() {
$('#dialog1').dialog('open');
return false;
});
$('#Wizard1_txtEmailID').click(function() {
$('#dialog2').dialog('close');
return false;
});
//mouseover
$('#Wizard1_txtPassword').click(function() {
$('#dialog1').dialog('close');
return false;
});
});
/////////////////////////////////////////////////////
<div id="dialog1" title="Email ID">
<p>
(Enter your Email ID here.)
<br />
</p>
</div>
////////////////////////////////////////////////////////
<div id="dialog2" title="Password">
<p>
(Enter your Passowrd here.)
<br />
</p>
</div>
私の解決策:いくつかのinitオプションを削除します(例:. show)、何かが機能していない場合(スライド効果など)コンストラクターは降伏しないためです。 動的html挿入なしの私の機能:
function ySearch(){ console.log('ysearch');
$( "#aaa" ).dialog({autoOpen: true,closeOnEscape: true, dialogClass: "ysearch-dialog",modal: false,height: 510, width:860
});
$('#aaa').dialog("open");
console.log($('#aaa').dialog("isOpen"));
return false;
}
私も同様の問題に直面しました。 これが私が同じことを解決できた方法です。
$("#lnkDetails").live('click', function (e) {
//Create dynamic element after the element that raised the event. In my case a <a id="lnkDetails" href="/Attendance/Details/2012-07-01" />
$(this).after('<div id=\"dialog-confirm\" />');
//Optional : Load data from an external URL. The attr('href') is the href of the <a> tag.
$('#dialog-confirm').load($(this).attr('href'));
//Copied from jQueryUI site . Do we need this?
$("#dialog:ui-dialog").dialog("destroy");
//Transform the dynamic DOM element into a dialog
$('#dialog-confirm').dialog({
modal: true,
title: 'Details'
});
//Prevent Bubbling up to other elements.
return false;
});