web-dev-qa-db-ja.com

jQueryの単純なモーダルdiv？

私はネットで見つけることができるほとんどすべてのjQuery Modalプラグインを試しましたが、それらはすべて私が必要とするものに対して非常にかさばるものです。すべての豪華な機能は必要ありません。divを開いて、ページの背景を下の写真のように透明な灰色にして、divをその上に配置できるようにしたいのです。かさばるプラグインを使用する代わりに、これを行うためにいくつかのjQueryを記述したいと思います。誰かがこのタスクを実行できる小さなコードを持っていますか？透明な背景は画像ですか、それとも単なるCSSですか？

jquerycssmodal-dialog
15
JasonDavis

編集：これは明らかに古くなっています。以下のAndrew Odriの投稿を参照してください。

CSSとJavaScriptがどれほど優れているかはわかりませんが、自分の要求がそれほど難しくないはずです。

body, html { margin:0; padding:0; }
#modalTabelGray
{
    position:absolute;
    width:100%;
    height:100%;
    background-color:#000000;
    filter:alpha(opacity=60);
    opacity:0.6;
    -moz-opacity:0.6;
    z-index:100;

    text-align:center;
    vertical-align:middle;
}

#modalDiv
{
    position:absolute;
    z-index:101;
}

私はコードをテストしていません、動作しない可能性がありますが、あなたはアイデアを得るでしょう。

19
はると

これは私が使用するものです。見栄えが良く、コードはシンプルで理解しやすく、最小限のCSSとjQueryを使用しています。

ここにコードがあります（そしてそれを実際に見るためのフィドル： http://jsfiddle.net/cadkJ/125/ ）：

[〜＃〜] html [〜＃〜]

<h1>Bacon ipsum dolor sit amet</h1>

<p>Magna adipisicing eu, pig ex pariatur non biltong nisi consequat do exercitation. Biltong exercitation consequat aute. Excepteur velit ribeye, et salami pariatur sed consequat enim ham. Tenderloin consequat et, in pastrami aute meatloaf beef spare ribs tri-tip beef ribs sed ut jerky strip steak. Fugiat turkey shank frankfurter pork loin pastrami.</p>

<button id="modal-launcher">Launch Modal Window</button>

<div id="modal-background"></div>
<div id="modal-content">
    <button id="modal-close">Close Modal Window</button>
</div>​

[〜＃〜] css [〜＃〜]

#modal-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: .50;
    -webkit-opacity: .5;
    -moz-opacity: .5;
    filter: alpha(opacity=50);
    z-index: 1000;
}

#modal-content {
    background-color: white;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 0 0 20px 0 #222;
    -webkit-box-shadow: 0 0 20px 0 #222;
    -moz-box-shadow: 0 0 20px 0 #222;
    display: none;
    height: 240px;
    left: 50%;
    margin: -120px 0 0 -160px;
    padding: 10px;
    position: fixed;
    top: 50%;
    width: 320px;
    z-index: 1000;
}

#modal-background.active, #modal-content.active {
    display: block;
}​

jQuery

$(function(){
    $("#modal-launcher, #modal-background, #modal-close").click(function() {
        $("#modal-content, #modal-background").toggleClass("active");
    });
});

スクロールをロックしますか？

次のCSSルールを追加します。

body.active { position: fixed; overflow: hidden; }

JQuery関数を次のコードに置き換えます：（bodyが3行目に追加されました）

$(function(){
    $("#modal-launcher, #modal-background, #modal-close").click(function() {
        $("body, #modal-content, #modal-background").toggleClass("active");
    });
});

背景のクリックイベントがモーダルを閉じないようにしますか？

JQuery関数を（#modal-background 2行目から削除）

$(function(){
    $("#modal-launcher, #modal-close").click(function() {
        $("#modal-content, #modal-background").toggleClass("active");
    });
});
46
Andrew Odri

私は[〜＃〜]しない[〜＃〜]jQuery UIをお勧めします-それは巨大で、その単純なタスクには複雑すぎます。その他のプラグインは次のとおりです。

6
Kordonme

SimpleModal は、まさにあなたがやりたいことをします。

3
David Robbins

モーダルをサポートするダイアログプラグインがあるjQuery UIを使用できます。 http://jqueryui.com/demos/dialog/#modal

または、サイズがビューポート全体に広がるdivを作成し、その不透明度を50％（0.5）に設定し、すべてのイベントをキャッチして停止してモーダルにします。次に、divをその上に表示します。

2
Gabriele Petrioli

私はこのためにjQuery UI Dialogを使用しています。 http://jqueryui.com/

1
atfergs

純粋なHTMLとcssを使用して単純なモーダルを作成できます。javascriptとjqueryは必要ありません。間接的に時間と作業を削減できます。

html-->
    <a href="#openModal">Open Modal</a>

   <div id="openModal" class="modalDialog">
   <div>    <a href="#close" title="Close" class="close">X</a>

        <h2>Modal Box</h2>

    <p>This is a sample modal box that can be created using the powers of CSS3.</p>
    <p>You could do a lot of things here like have a pop-up ad that shows when your    website loads, or create a login/register form for users.</p>
   </div>
    </div>

      css-->

   .modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
 }
 .modalDialog:target {
 opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}

訪問 this 。

1
kumaresan

このタスクの別のプラグインを指定するには nyromodal を使用するのが簡単ですが、必要に応じて多くの設定オプションを提供します（後で）。

0
harpax