「jQuery」ダイアログ・ボックス
https://stackoverflow.com/questions/366696
-
21-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
jqueryでダイアログボックスを作成しようとしています。このダイアログ ボックスには利用規約が表示されます。問題は、ダイアログ ボックスが初回のみ表示されることです。
これがコードです。
JavaScript:
function showTOC()
{
$("#TOC").dialog({
modal: true,
overlay: {
opacity: 0.7,
background: "black"
}
})
}
HTML (href):
<a class="TOClink" href="javascript:showTOC();">View Terms & Conditions</a>
<div id="example" title="Terms & Conditions">1..2..</div>
私が思う問題は、ダイアログボックスを閉じると DIV が HTML コードから破棄され、画面上に再び表示できなくなることです。
助けていただけますか!
ありがとう
解決
投稿したコードに問題があるようです。利用規約を表示する関数が間違った div ID を参照しています。ドキュメントがロードされたら、showTOC 関数を onclick 属性に割り当てることも検討する必要があります。
$(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>
他のヒント
私も同じ問題に遭遇しました（ダイアログは一度だけ開き、閉じた後は再度開きません）。上記の解決策を試しましたが、問題は修正されませんでした。ドキュメントに戻って、ダイアログの仕組みについて根本的な誤解をしていたことに気づきました。
$('#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>
私も同じ問題を抱えており、それを解決する方法を探していたので、ここに来ました。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;
}
RaeLehman のソリューションは、ダイアログのコンテンツを 1 回だけ生成する (または JavaScript を使用して変更するだけ) 場合に機能します。実際に毎回ダイアログを再生成したい場合 (たとえば、ビュー モデル クラスと Razor を使用する場合)、 $(".ui-dialog-titlebar-close").click(); ですべてのダイアログを閉じることができます。autoOpen をデフォルト値の true に設定したままにします。
<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>
これはもう少し簡潔で、さまざまなクリック イベントに基づいてさまざまなダイアログ値などを設定することもできます。
$('#click_link').live("click",function() {
$("#popup").dialog({modal:true, width:500, height:800});
$("#popup").dialog("open");
return false;
});
私の解決策:いくつかの初期化オプションを削除します (例: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;
});
すべてのダイアログの不透明度を変更したい場合は、jquery-ui.css で変更します
/* Overlays */
.ui-widget-overlay
{
background: #5c5c5c url(images/ui-bg_flat_50_5c5c5c_40x100.png) 50% 50% repeat-x;
opacity: .50;
filter: Alpha(Opacity=80);
}
