web-dev-qa-db-ja.com

divをモーダルポップアップとして表示する

私は次のdivを持っています：

<div id="divAlert">
    <div id='divAlertText'>You must select a language.</div>
    <div id='divAlertButton' class='btn blue' onclick="HideAlert();">Ok</div>
</div>

このHTMLページには、さらにdivとボタンがあります。 divAlertをモーダルポップアップとして表示したい。

JQueryに何かがあり、ページ全体を埋める半透明の黒い背景でdivを表示できると思います。しかし、その名前は思い出せません。

何かアドバイス？

htmlmodal-dialog
14
VansFannel

jqueryダイアログウィジェットを使用できます

http://jqueryui.com/demos/dialog/

14
Buddhi

シンプルなモーダルポップアップdivまたはダイアログボックスは、CSSプロパティと少しのjQueryによって実行できます。基本的な考え方は単純です。

  • 1.半透明の背景を持つdivを作成し、クリックしてコンテンツページの上部に表示します。
  • 2.半透明の調光/非表示divの上にポップアップdivまたはアラートdivを表示します。

    • したがって、3つのdivが必要です。

  • コンテンツ（サイトのメインコンテンツ）。
    • hider（コンテンツを暗くするため）。
    • popup_box（表示するモーダルdiv）。

      まず、CSSを定義します。

          #hider
    {
        position:absolute;
        top: 0%;
        left: 0%;
        width:1600px;
        height:2000px;
        margin-top: -800px; /*set to a negative number 1/2 of your height*/
        margin-left: -500px; /*set to a negative number 1/2 of your width*/
        /*
        z- index must be lower than pop up box
       */
        z-index: 99;
       background-color:Black;
       //for transparency
       opacity:0.6;
    }

    #popup_box  
    {

    position:absolute;
        top: 50%;
        left: 50%;
        width:10em;
        height:10em;
        margin-top: -5em; /*set to a negative number 1/2 of your height*/
        margin-left: -5em; /*set to a negative number 1/2 of your width*/
        border: 1px solid #ccc;
        border:  2px solid black;
        z-index:100; 

    }

      Popup_boxを一番上に表示したいので、ハイダーdivのz-indexをpop_upボックスよりも低く設定することが重要です。
      ここにJavaスクリプト：

              $(document).ready(function () {
        //hide hider and popup_box
        $("#hider").hide();
        $("#popup_box").hide();

        //on click show the hider div and the message
        $("#showpopup").click(function () {
            $("#hider").fadeIn("slow");
            $('#popup_box').fadeIn("slow");
        });
        //on click hide the message and the
        $("#buttonClose").click(function () {

            $("#hider").fadeOut("slow");
            $('#popup_box').fadeOut("slow");
        });

        });

      最後に、HTML：

      <div id="hider"></div>
<div id="popup_box">
    Message<br />
    <a id="buttonClose">Close</a>
</div>    
<div id="content">
    Page's main content.<br />
    <a id="showpopup">ClickMe</a>
</div>

      Jquery-1.4.1.min.js www.jquery.com/downloadを使用し、Firefoxでコードをテストしました。お役に立てれば。

    • 46
    mirmdasif