KickStart HTMLポップアップ

HTML KickStartに関する投稿を読んで、すぐに前述の一連のスクリプトとスタイルを試してみることにしました。 検討した後、私はそれを特定のプロジェクトで実行することにしました。 しかし、ポップアップが表示されないことに不愉快な驚きを覚えました。ページを頻繁に閲覧するのは好きではありません。 たとえば、新しいユーザーを追加するためのフォームなどのタスクは、ユーザーを新しいページに移動させるのではなく、ポップアップウィンドウに必要なものを表示する必要があります。 そこで、このスクリプトを作成しました。 カットの下の詳細。



この記事の執筆時点でのHTML KickStart 0.9 MITの現在のバージョン。



私が最初にしたことは、JavaScript用に別のファイルを作成することでした。 「user.js」という名前を付けて「js」フォルダーに入れ、すぐにページに接続しました。

<script type="text/javascript" src="js/user.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これらのブロックをコードにその場で挿入できるように、ページへのブロックの追加を可能な限り単純化することが決定されましたが、最初にページをシェーディングする素材を作成する必要があります。 終了bodyタグのすぐ上に、id bgのdivを挿入しました。

 <div id="bg"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ルートにあるstyle.cssで、次のスタイルを規定しました。

 #bg { width:100%; height:100%; position:fixed; top:0;left:0; background:black; display:none; z-index:601; /*  ,     KickStart  z-index 600 */ opacity:0.3; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

開くブロックに、クラス「hiddenBlock」を割り当て、一意のIDを割り当てることにしました。

 <div class="hiddenBlock" id="createUser">  </div> <div id="bg"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSSでは、「hiddenBlock」クラスについて説明しました。

 .hiddenBlock { position:absolute; top:20%; left:50%; z-index:602; width:400px; background:#efefef; border: 1px solid #ccc; padding:10px 20px; border-radius:10px; margin-left:-210px; display:none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ウィンドウを開くボタンに、開く必要があるウィンドウのIDを持つ「box」属性を追加し、「show」クラスを追加しました。

 <button class="medium blue show" box="createUser"></button>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ウィンドウを閉じるために、「close」クラスを含むボタンを作成しました。

 <button class="medium blue close"></button>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さて、コード自体、最後に：

 $(document).ready(function(){ $(".show").click(function(){ $("#bg").show(); $("#"+($(this).attr("box"))).slideDown("fast"); }); $(".close").click(function(){ $("#bg").hide(); $(".hiddenBlock").slideUp("fast"); return false; //   ,     }) });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次のようになりました：

 <button class="medium blue show" box="createUser"></button> <div class="hiddenBlock" id="createUser"> <form action="index.php" method="post">    (    ) <button class="medium green"></button> <button class="medium blue close"></button> </form> </div> <div id="bg"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

作業実演

誰かがこの情報が役立つことを願っています。