WEB ページ全体を暗い DIV で覆って操作できないようにして、その上に DIV を乗せてコンテンツを表示します。確実に DIV でページを覆うために、サイズは２倍にしていますが、iPhone 等のスマホで向きを変える場合など、イベント対応しない場合に有効です。 ※ 暗転後のコンテンツの位置は、暗転を行うコントロールを基準に表示するようにしています。 IE 用の処理の中で、jQuery を使っていない部分がありますが、元々 DOM でテスト済みなのを jQuery でテストする意味もあまりなかった(古いIE用なので)のでそのままにしています。
<script>
if ( !window.jQuery ) {
if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
if ( window.addEventListener ) {
window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
}
else {
window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
}
}
document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<script>
// *********************************************************
// 暗転時に操作するウインドウの作成
// *********************************************************
$(function(){
$("#win_base")
.hide()
.css({
position: "absolute",
color: "#000000",
backgroundColor: "#E0E0E0",
borderStyle: "solid",
borderColor: "#303030",
borderWidth: "1px",
width: "0px",
height: "0px",
borderRadius: "6px",
zIndex: 0x7fffffff
});
$("#win_base input")
.attr("type", "image")
.prop("src", "http://winofsql.jp/image/mcancel.png")
.css("float", "right")
.click(function(){
$(this.parentNode).hide();
$(window["dark_modal"]).remove();
});
});
// *********************************************************
// 暗転時に操作するウインドウを target 基準の指定位置に表示
// *********************************************************
function setDark(target,x,y,w,h) {
setDarkModal();
var numY = target.offsetTop;
var numX = target.offsetLeft;
var obj = target;
while( obj = obj.offsetParent ) {
numY += obj.offsetTop;
numX += obj.offsetLeft;
if ( obj.tagName.toUpperCase() == 'BODY' ) {
break;
}
}
$("#win_base").css( "top", (numY+y) + "px" );
$("#win_base").css( "left", (numX+x) + "px" );
$("#win_base").css( "width", w + "px" );
$("#win_base").css( "height", h + "px" );
$("#win_base").show();
}
// *********************************************************
// 暗転用の DIV を作成
// *********************************************************
function setDarkModal(){
var dark_modal = document.createElement('div');
$(dark_modal)
.attr('id','dark_modal')
.css( {
position: "absolute",
width: Math.max(document.documentElement.scrollWidth,document.body.scrollWidth)*2+'px',
height: Math.max(document.documentElement.scrollHeight,document.body.scrollHeight)*2+'px',
left: "0px",
top: "0px"
});
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("msie") > -1) {
$(dark_modal).hide();
var appVersion = window.navigator.appVersion.toLowerCase();
if (appVersion.indexOf("msie 10.0") > -1) {
$(dark_modal).css({
backgroundColor: "#000000",
opacity: 0.5
});
}
else {
dark_modal.style.backgroundColor = '#000000';
dark_modal.style.filter='alpha(opacity=50)';
}
}
else {
$(dark_modal).css({
backgroundColor: "#000000",
opacity: 0.5
});
}
$("body").append(dark_modal);
if (userAgent.indexOf("msie") > -1) {
dark_modal.style.display = '';
}
window["dark_modal"] = dark_modal;
}
</script>
<input type="button" value="暗転ボタン" onclick='setDark(this,100,0,200,50);'>
<div id="win_base" style='display:none'><input>
<div id=win_box style='padding:2px;'>ここにコンテンツ</div>
</div>
関連する記事 JavaScript : zIndex の最大値と思われる 0x7FFFFFFF を各ブラウザでテストしました JavaScript : クリックした要素の位置を計算して、近くにウインドウを開く JavaScript : ブラウザの表示を半透明で暗くする方法( scrollHeight で高さ決定 )
タグ：jquery javascript
|
|
【jQueryの最新記事】
- jQuery の $.get を使用した ajax のテンプレート
- jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方
- jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック
- FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
- jQuery + bootstrap.js で ajax の GET と POST を使用した DB テーブルを更新する UI テンプレート
- jQuery : 貼り付けるだけで、ページ右下にページ先頭にジャンプするリンクを表示させる( アニメーションは無し )
- STYLE 要素を追加して、CSS テキストをセットして、jQuery で CSS に important 指定を追加する。
- ページの右下に、ページの先頭へ移動するボタンを追加する(ページの先頭から 200px までは、スクロールボタンを表示しない)
- テーブルのTDをクリックしたら、INPUT で値を変更可能にして、元の値と違うものにはフラグを立てる処理を絵で書いて説明してみました
- jQuery を使用してサーバから取得した JSON データを元にテーブルを作成し、その後から列を加工する
- JSON 配列を WEB より読み出して jQuery で動的にテーブルを作成して表示する
- jQuery UI の Datepicker Widget のオプション
- FormData を使用して、jQuery で配列として PHP に送る
- 必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る
- Android Studio の追加日本語化用に、キャラクタセットに依存しないコード文字列を作成するツールを作成しました
- 画像ファイルが存在した時のみ、表示する jQuery の記述
- jQuery で mobile(スマホ) かどうかのチェックをしたくて調べたら、Stack Overflow の記事でいろんな方法が答えられていました。
- jQuery と FileReader オブジェクトによる、ローカルの複数画像ファイルのプレビュー表示
- とても面白くて簡単な jQuery のクリックしたコンテンツ以外を暗転(Blackout) するサンプル
- jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理
