コメントのポップアップを作成するプラグイン jquery を検索してみます。しかし、私はそれをどのように使用するのか、ポップアップをサポートするプラグインは何なのかわかりません。誰でも簡単なコードを示して説明するのに役立ちます
質問する
1365 次
1 に答える
2
これを試して：
知っておくべき重要事項は次のとおりです。
<head>1つ: (1) jQuery ライブラリ、(2) jQueryUI ライブラリ、(3) jQueryUI css の 3 つの参照が必要です。
2: 任意の div をダイアログにすることができます。div には、ボタン、画像、入力ボックスなど、任意の HTML 書式設定と要素を含めることができます。すべての書式設定された要素を含む div は、ダイアログにそのまま表示されます。
3: 通常の方法では、最初にダイアログを初期化autoOpen: false,しますが、 を設定し、後でコマンドで強制的に開くことができます('#divID').dialog( 'open' )。
4: ボタンをクリックしても、ダイアログは自動的に閉じません。('#divID').dialog( 'close' )コマンドを使用して閉じる必要があります
5: ダイアログを初期化するときに使用できる設定は多数あります。
* autoOpen: true/false,
* width: 500, //Note: no 'px'
* position: 'top',
* draggable: false,
* closeOnEscape : false
6: ダイアログを再利用するには、つまり、内容を置き換えて再度開くには:
$('#dlgDiv').html('<div>New stuff goes here</div>');
$('#dlgDiv').dialog('open');
7: ダイアログを完全に破棄するには (以下を使用して別のダイアログを再作成できます.dialog():
$('#dlgDiv').dialog('destroy');
完全に機能し、スタンドアロンで、カット/ペースト可能な例:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function() {
$('#thePopup').dialog({
autoOpen: false,
modal:true,
title: 'You can put any title here:',
width: 800, //default width is 300px, default height is auto
buttons: {
Giraffe: function() {
alert('You hit subMIT');
$('#thePopup').html(''); //empty dlg - always a good idea
$(this).dialog('close');
}
}
}); //END dialog init
$('#mybutt').click(function() {
$('#thePopup').html('<img src="http://placekittens.com/150/150">');
$('#thePopup').dialog('open');
});
}); //END $(document).ready()
</script>
</head>
<body>
<div id="thePopup"></div>
<input type="button" id="mybutt" value="Show the Popup" />
</body>
</html>
追加資料:
http://salman-w.blogspot.ca/2013/05/jquery-ui-dialog-examples.html
jquery uiダイアログボックスのタイトルの色とフォントサイズをカスタマイズするには?
https://www.udemy.com/blog/jquery-popup-window/
要素の位置をjquery UIダイアログに渡すにはどうすればよいですか
http://api.jqueryui.com/dialog/
于 2013-09-14T03:31:57.723 に答える