arcticModal-jQueryモーダルプラグイン

モーダルウィンドウとダイアログを実装するための多くのjQueryプラグインがあります。 それらの多くを試したが、私は十分に単純で、そして重要なことに、タスクを正しく解決する単一のものを見つけませんでした。



SamDarkは最近、 適切なモーダルウィンドウについて書いて、The Modalプラグインをコミュニティに紹介しました。 私は彼のモーダルウィンドウのビジョンに完全に同意しますが、提示されたプラグインには機能性が欠けていました。 私は同じトピックについてプロジェクトからプロジェクトへと長い間さまよっていたので、プラグインとしてもアレンジすることにしました。

主な機能

• 複数のウィンドウの同時表示
• ウィンドウを垂直および水平に中央揃えする
• プロセスの視覚化によるモーダルウィンドウコンテンツのAJAX読み込み
• ページのメインコンテンツのスクロールバーを非表示にします
• 画面に収まらない場合にウィンドウをスクロールする機能
• Escapeキーを押すか、オーバーレイをクリックしたときにウィンドウを閉じる

プラグインを使用する

jQueryとjquery.arcticmodalプラグインを含めます。

<script src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script> <script src="js/arcticmodal/jquery.arcticmodal-0.1.min.js"></script> <link rel="stylesheet" href="js/arcticmodal/jquery.arcticmodal-0.1.css">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

HTMLマークアップ：

 <div class="b-modal" id="exampleModal"> <div class="b-modal_close arcticmodal-close">X</div>    </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

JavaScript：

 $('#exampleModal').arcticmodal();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ドキュメント、例、およびダウンロードはこちら



建設的な批判は大歓迎です:)



UPD GitHubリポジトリ