javascript - このポップアップが何と呼ばれるかわからない

Question

このようなポップアップを作りたいです。ユーザーが上のボタンをクリックすると、画像がポップアップ表示されます。

実際、私はそれが何と呼ばれているのかよくわからないので、これを行うのに役立つリンクを見つけることができません。

したがって、リンクやヘルプをいただければ幸いです。

ありがとう。

Answer 1

ここでコードを確認してください-http://jsfiddle.net/h7pxU/

あなたは単にトグル/showhidedivによって同じことをすることができます

$('.link').click(function(){
    $('.popup').toggle();
});

.popupは一緒にある必要がposition: absoluteあり、その親は持っている必要がありますposition: relative

お役に立てれば！

Answer 2

これは非常に基本的なデモであり、ライブラリなしのプレーンJavaScriptを使用します。document.querySelectorおよびaddEventListenerはIE以前のバージョン9には実装されていないため、jQueryまたは別のJS-Frameworkを使用することをお勧めします。

HTML

まず、正しい構造が必要です。ラッパー、ボタン、メニューが必要です。

<div class="menuwrapper">
    <button>Click me!</button>
    <div class="menu">
        <label><input type="checkbox"> Auto-save this page</label>
        <label><input type="checkbox"> Make this page private</label>
        <label><input type="checkbox"> Hide notifications</label>
    </div>
</div>

CSS

次に、これらの要素のスタイルを設定する必要があります

.menuwrapper{
    overflow:none;
    position:relative; // this will have an effect on the absolute position later on
}
.menuwrapper > button{
   border: 1px solid;  // style the way you want it
}

.menuwrapper > div{
   border: 1px solid;  // again, style the way you want it
   display:none;       // hide the div
   position: absolute; // use absolute positioning
   top:110%;           // place it about 10% of the containing container's height below it
   z-index:2;          // place it above other elements
}


.menuwrapper> div > label{
   display:block;      // again, customize this.
}

JavaScript

次に、すべてのラッパーにイベントリスナーを追加する必要があります。

var results = document.querySelectorAll(".menuwrapper"); // save all menues
var i; // index
for(i = 0; i < results.length; ++i){
    // for every menuwrapper, add an listener
    results[i].addEventListener('click',function(e){
        // make the contained menu visible
        this.querySelector(".menu").style.display = 'block';

        // stop the event from propagation
        e.stopPropagation();
    });
}

// Almost the same, but if anything outside of the
// menuwrapper is clicked then all menus should be closed.
window.addEventListener('click',function(){
    var i;
    var results = document.querySelectorAll(".menuwrapper .menu");
    for(i = 0; i < results.length;  ++i)
        results[i].style.display = 'none';        
});

JSFiddleデモ

参照：

• MDN：element.querySelector