> php教程 > php手册 > jQuery Model Dialog|jQuery弹出层|javascript弹出层

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

WBOY
풀어 주다: 2016-06-06 19:34:49
원래의
2512명이 탐색했습니다.

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으로 문의하세요.
최신 이슈
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿