jQueryで実現する遮罩効果付きのblockUI弹出レイヤーのサンプル[デモソースコードダウンロード付き]

この記事ではjQueryでマスク効果のあるblockUI弹出層を実現する方法について説明します。皆さんに参考にしていただければ幸いです。以下の通りです：

まずまずコードを付ける：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
   <title>blockUI（弹出層）</title>
   <style type="text/css">
   #demo {
     width:100px;
     height:24px;
     text-align:center;
   }
   #displayBox{
     display:none;
   }
   </style>
 </head>
 <body>
   <button id="demo">クリックで弹出</button>
   <div id="displayBox">
     ここに弹出層の表示内容が表示されます！！！<br /><br /><br /><a href="javascript:void(0);" onclick="$.unblockUI();return false;" title="[#1#]">クリックで閉じる</a>
   </div>
 </body>
 </html>
 <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="jquery.blockUI.js"></script>
 <script type="text/javascript">
 $(function(){
   $('#demo').click(function(){
     $.blockUI({
       message: $('#displayBox'),
       css: {
         width: '500px',
         height: '100px',
         backgroundColor: '#eee',
         border: '1px solid red',
         color: 'green',
         textAlign: 'center',
         cursor: 'default'
       }
     });
   });
 >)
 </script>

実行結果の画像は以下の通りです：

以下はパラメータの説明です：

message = 表示する内容

css = 表示される内容のスタイル、属性はjsの形式で書かれます。例えば background-color => 背景色

$.unblockUI() = ボックスを閉じる

完全な実例コードはこちらをクリックしてください本サイトのダウンロード。

ウェブサイトのURLを追加します：http://www.malsup.com/jQuery/ブロック/

jQueryに関連する詳細な内容に興味がある読者は、以下の特集を参照してください：《jQueryウィンドウ操作の技術的概要》、《jQueryドラッグ＆ドロップ効果と技術的概要》、《jQuery常用プラグインと使用方法の概要》、《jQueryのAjax使用方法の概要》、《jQueryテーブル（table）操作の技術的概要》、《jQuery拡張技術の概要》、《jQuery一般的なクール効果の概要》、《jQueryアニメーションと効果の使用方法の概要》および《jQuery選択子の使用方法の概要》

本稿で述べたことが皆様のjQueryプログラミングに役立つことを願っています。

声明：本文の内容はインターネットから提供されています。著作権は原著者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしました。本サイトは所有権を有しておらず、編集は行われていません。著作権侵害が疑われる内容が見つかった場合は、メールを送信してください：notice#oldtoolbag.com（メール送信時は、#を@に変更してください。通報を行い、関連する証拠を提供してください。一旦確認がとりさえあれば、本サイトは侵害される可能性のある内容をすぐに削除します。）

基礎教程