ホームページ > php教程 > php手册 > jQuery Model Dialog|jQuery弹出层|javascript弹出层

jQuery Model Dialog|jQuery弹出层|javascript弹出层

WBOY
リリース: 2016-06-06 19:34:49
オリジナル
2511 人が閲覧しました

jQuery实现简单的模态对话框 dialog-model-mask#遮罩层 dialog-model-show#弹出层边缘 dialog-model-text#弹出层text jQuery var Dialog = Dialog || {};Dialog.showModel = function (width, height, text){var wdw = $(window).width();var wdh = $(window)

jQuery实现简单的模态对话框

dialog-model-mask  # 遮罩层
dialog-model-show  # 弹出层边缘
dialog-model-text    # 弹出层text jQuery
var Dialog = Dialog || {};
Dialog.showModel = function (width, height, text){
	var wdw = $(window).width();
	var wdh = $(window).height();
	var left = Math.ceil((wdw - width)/2);
	var top = Math.ceil((wdh-height)/2)-Math.floor(height/3);
	var html = '<div id="dialog-model-mask" style="width:'+ wdw +'px;height:'+ wdh +'px;background:#000000;position:fixed;z-index:999;left:0px;top:0px;opacity:0.3;filter:alpha(opacity=30);"></div>';
	html += '<div id="dialog-model-show" style="width:'+ width +'px;height:'+ height +'px;margin:0px;padding:0px;border:8px solid #555555;border-radius:5px;position:fixed;z-index:998;left:'+ left +'px;top:'+ top +'px;opacity:0.6;filter:alpha(opacity=60);"></div>';
	html += '<div id="dialog-model-text" style="width:'+ width +'px;height:'+ height +'px;margin:0px;padding:0px;background:#ffffff;position:fixed;z-index:1000;left:'+ (left + 8) +'px;top:'+ (top + 8) +'px;">'+ text +'</div>';
	$(document.body).append(html);
}
Dialog.hideModel = function (){
	$("div#dialog-model-mask").hide();
	$("div#dialog-model-show").hide();
	$("div#dialog-model-text").hide();	
}
ログイン後にコピー
jQuery Model Dialog|jQuery弹出层|javascript弹出层
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート