javascript - フルスクリーン ホバー サインアップ ボックス -- スクエアスペースで見られるもの

Question

http://www.squarespace.com/templates/?q=minskのサインアップ プロセスが気に入っています -- [このテンプレートで開始] をクリックすると、ビューポート全体が引き継がれ、サインアップ ボックスが表示されます上。

これと同様のことを既に実行しているスクリプトを知っている人はいますか?

Answer 1

シンプルな JavaScript で非常に簡単に実行できます。

HTML:

<div id="trigger">Click to open</div>
<div id="overlay"></div>
<div id="login">
    <h1>title</h1>
    <form action="/login" method="POST">
        <label>Username:
            <input type="email" name="username" />
        </label>
        <label>Password:
            <input type="password" name="pass" />
        </label>
        <button>Login</button>
    </form>
</div>

CSS:

#overlay, #login {
    display: none;
}
#overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: black;
    opacity: 0.7;
    filter:alpha(Opacity=70);
    z-index: 999;
}
/* Change styles as you like beyond here, make sure the z-index of #login be always higher than #overlay */
#login {
    position:fixed;
    top: 5%;
    left: 35%;
    width: 30%;
    height: 50%;
    background: #555;
    padding: 5px;
    color:white;
    z-index: 1000;
}
#login h1 {
    margin: 0.5em 0;
}
#login form input {
    width: 90%;
    padding: 5px;
}
#trigger {
    width: 100px;
    padding: 5px;
    background: #ccc;
}

Javascript (jQuery):

$(function(){
    $('#trigger').click(function(){
        $('#login').fadeIn(500);
        $('#overlay').fadeIn(500);
    });
    $('#overlay').click(function(){
        $('#login').fadeOut(500);
        $('#overlay').fadeOut(500);
    });
});

オーバーレイをクリックして、ウィンドウを終了できます。

例を参照してください。

Answer 2

これをモーダル ウィンドウと呼びます。jQueryまたは JavaScriptを使用して実現できます。簡単に始めるには、QunessのSimple jQuery Modal Window Tutorialで提供されているチュートリアルを確認してください。

コードは非常に単純です。まず、HTMLをビルドする必要があります。

<!-- #dialog is the id of a DIV defined in the code below -->
<a href="#dialog" name="modal">Simple Modal Window</a>

<div id="boxes">


    <!-- #customize your modal window here -->

    <div id="dialog" class="window">
        <b>Testing of Modal Window</b> | 

        <!-- close button is defined as close class -->
        <a href="#" class="close">Close it</a>

    </div>


    <!-- Do not remove div#mask, because you'll need it to fill the whole screen -->    
    <div id="mask"></div>
</div>

プレゼンテーションのルック アンド フィール用のCSS 。

/* Z-index of #mask must lower than #boxes .window */
#mask {
  position:absolute;
  z-index:9000;
  background-color:#000;
  display:none;
}

#boxes .window {
  position:fixed;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}


/* Customize your modal window here, you can add background image too */
#boxes #dialog {
  width:375px; 
  height:203px;
}

最後に、インタラクション用のJavaScriptです。

$(document).ready(function() {  

    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag
        var id = $(this).attr('href');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(2000); 

    });

    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .window').hide();
    });     

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });         

});

このプロジェクトの動作デモは、Queness WebBlog の Simple jQuery Modal Window Examples でホストされています。Simple Window Modalそのページのリンクをクリックします。