jQueryダイアログポップアップ
このリンクをクリックすると表示されるダイアログポップアップフォームを取得しようとしていますが、うまくいきません。私は過去3時間これに取り組んでおり、これは私にとって非常にイライラしています。
これが私のHTMLです。
<a href="#" id="contactUs">Contact Us</a>
<div id="dialog" title="Contact form">
<p>appear now</p>
</div>
そして、これが私のJavaScriptです。これは外部ファイルにあります。
$("#contactUs").click(function() {
$("#dialog").dialog("open");
return false;
});
私はこれらのリンクを使用しましたが、私には役に立ちません:
アイデアがあれば感謝します、感謝します。
このHTMLは問題ありません。
<a href="#" id="contactUs">Contact Us</a>
<div id="dialog" title="Contact form">
<p>appear now</p>
</div>
ダイアログを初期化する必要があります(これを行うかどうかはわかりません):
$(function() {
// this initializes the dialog (and uses some common options that I do)
$("#dialog").dialog({
autoOpen : false, modal : true, show : "blind", hide : "blind"
});
// next add the onclick handler
$("#contactUs").click(function() {
$("#dialog").dialog("open");
return false;
});
});
あなたの問題はダイアログの呼び出しにあります
ダイアログを初期化しない場合、表示するために「open」を渡す必要はありません。
_$("#dialog").dialog();
_
また、このコードは$(document).ready();
関数上にあるか、機能する要素の下にある必要があります。
以下のコードを使用して、それは私のために働いた。
<script type="text/javascript">
$(document).ready(function () {
$('#dialog').dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#contactUs').click(function () {
$('#dialog').dialog('open');
});
});
</script>
とても簡単です。最初にHTMLを追加する必要があります。
<div id="dialog"></div>
次に、初期化する必要があります。
<script type="text/javascript">
jQuery( document ).ready( function() {
jQuery( '#dialog' ).dialog( { 'autoOpen': false } );
});
</script>
この後、コードで表示できます:
jQuery( '#dialog' ).dialog( 'open' );
次のスクリプトを使用できます。それは私のために働いた
モーダル自体は、メインのモーダルコンテナ、ヘッダー、ボディ、およびフッターで構成されます。フッターにはアクション(この場合は[OK]ボタン)が含まれ、ヘッダーにはタイトルと閉じるボタンが含まれ、本文にはモーダルコンテンツが含まれます。
$(function () {
modalPosition();
$(window).resize(function () {
modalPosition();
});
$('.openModal').click(function (e) {
$('.modal, .modal-backdrop').fadeIn('fast');
e.preventDefault();
});
$('.close-modal').click(function (e) {
$('.modal, .modal-backdrop').fadeOut('fast');
});
});
function modalPosition() {
var width = $('.modal').width();
var pageWidth = $(window).width();
var x = (pageWidth / 2) - (width / 2);
$('.modal').css({ left: x + "px" });
}