web-dev-qa-db-ja.com

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;
});

私はこれらのリンクを使用しましたが、私には役に立ちません：

アイデアがあれば感謝します、感謝します。

jqueryjquery-uimodal-dialogjquery-ui-dialog
21
rj2700

この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;
  });
});
43
Andy Jones

あなたの問題はダイアログの呼び出しにあります

ダイアログを初期化しない場合、表示するために「open」を渡す必要はありません。

_$("#dialog").dialog();
_

また、このコードは$(document).ready();関数上にあるか、機能する要素の下にある必要があります。

7
Ricardo Souza

以下のコードを使用して、それは私のために働いた。

<script type="text/javascript">
     $(document).ready(function () {
            $('#dialog').dialog({
                autoOpen: false,
                title: 'Basic Dialog'
            });
            $('#contactUs').click(function () {
                $('#dialog').dialog('open');
            });
        });
</script>
4
Mohit Sharma

とても簡単です。最初にHTMLを追加する必要があります。

<div id="dialog"></div>

次に、初期化する必要があります。

<script type="text/javascript">
  jQuery( document ).ready( function() {
    jQuery( '#dialog' ).dialog( { 'autoOpen': false } );
  });
</script>

この後、コードで表示できます：

jQuery( '#dialog' ).dialog( 'open' );
3
Michael Martin

次のスクリプトを使用できます。それは私のために働いた

モーダル自体は、メインのモーダルコンテナ、ヘッダー、ボディ、およびフッターで構成されます。フッターにはアクション（この場合は[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" });
    }

参照： asp.netでjqueryを使用したモーダルポップアップ

1
Rameshbl

次のリンクを確認できます。 http://jqueryui.com/dialog/

このコードは正常に動作するはずです

$("#dialog").dialog();
0
Krishna