frank_zeng
- 浏览: 56765 次
- 性别:
- 来自: 深圳
-
文章分类
最新评论
/* JavaScript Document */
/* 页面MASK的对象ID */
var PAGE_MASK_ID = "page-mask-id";
/* 页面MASK对象的样式类名 */
var MASK_CLASS_NAME = "dlg-mask";
/* 页面UNMASK对象的样式类名 */
var UNMASK_CLASS_NAME = "dlg-unmask";
/* 页面对话框对象显示的样式类名 */
var DIALOG_CLASS_SHOW = "dialog-show";
/* 页面对话框对象隐藏的样式类名 */
var DIALOG_CLASS_HIDE = "dialog-hide";
var PAGE_IFRAME_MASK = "parge-iframe-for-mask-dialog";
var titleText = "提示";
var okText = "确定";
var cancelText = "取消";
/**
*
* @param id id
* @param contentText 提示内容
* @param promptCallback 点击确定时绑定的函数
*/
function showDialogs (id, contentText, promptCallback) {
createDialog(id, contentText, promptCallback);
appshowDialog(id, 300);
};
function removeChildNodes(dialog) {
var childs = dialog.childNodes;
for ( var i = childs.length - 1; i >= 0; i--) {
dialog.removeChild(childs[i]);
}
}
function createDialog(id, contentText, promptCallback) {
var dialog = document.getElementById(id);// dialog
if (!dialog) {
dialog = document.createElement("div");
dialog.id = id;
}
removeChildNodes(dialog);
dialog.className = DIALOG_CLASS_SHOW;
var u1 = document.createElement("U");
u1.className = "f1";
var u2 = document.createElement("U");
u2.className = "f2";
var u3 = document.createElement("U");
u3.className = "f3";
dialog.appendChild(u1);
dialog.appendChild(u2);
dialog.appendChild(u3);
var titleDiv = document.createElement("div");
titleDiv.className = "d_top";
dialog.appendChild(titleDiv);
var titleName = document.createElement("span");
titleName.innerHTML = titleText;
titleDiv.appendChild(titleName);
var imageherf = document.createElement("a");
imageherf.href = "javascript:void(0);";
var imageClose = document.createElement("img");
imageClose.src = "/rts/images/pupsnow_003.gif";
imageClose.border = "0";
imageherf.appendChild(imageClose);
titleDiv.appendChild(imageherf);
var content = document.createElement("div");
content.className = "d_body";
var promptImage = document.createElement("img");
promptImage.src = "/rts/images/!.png";
promptImage.border = "0";
promptImage.align = "absmiddle";
content.appendChild(promptImage);
content.appendChild(document.createTextNode(contentText));
content.appendChild(document.createElement("br"));
content.appendChild(document.createElement("br"));
dialog.appendChild(content);
var center = document.createElement("div");
center.align = "center";
content.appendChild(center);
var okButton = document.createElement("input");
okButton.type = "button";
okButton.className = "alert-okButton";
okButton.value = okText;
center.appendChild(okButton);
var cancelButton = document.createElement("input");
cancelButton.type = "button";
cancelButton.className = "alert-cancelButton";
cancelButton.value = cancelText;
center.appendChild(cancelButton);
var foot = document.createElement("div");
foot.className = "d_foot";
dialog.appendChild(foot);
var u4 = document.createElement("U");
u1.className = "f1";
var u5 = document.createElement("U");
u2.className = "f2";
var u6 = document.createElement("U");
u3.className = "f3";
dialog.appendChild(u6);
dialog.appendChild(u5);
dialog.appendChild(u4);
document.body.appendChild(dialog);
okFunction = function() {
cancel(id);
if (promptCallback)
promptCallback(id);
};
cancelFunction = function hideDialog() {
cancel(id);
};
imageherf.onclick = cancelFunction;
okButton.onclick = okFunction;
cancelButton.onclick = cancelFunction;
appshowDialog(id, 300);
}
function appshowDialog(dialog, width) {
if ((typeof dialog) == "string") {
dialog = document.getElementById(dialog);
}
if (!dialog) {
return;
}
dialogMask();
/* 改变样式 */
dialog.className = DIALOG_CLASS_SHOW;
dialog.style.display = '';
dialog.style.width = width + "px";
// dialog.style.height = height + "px";
/* 可拖动 */
// drag(dialog);
/* 调整位置至居中 */
center(dialog, width);
if (navigator.appName == 'Microsoft Internet Explorer') {
var mif = document.getElementById(PAGE_IFRAME_MASK);
if (!mif) {
mif = document.createElement('iframe');
mif.className = 'mask-if';
mif.id = PAGE_IFRAME_MASK;
document.body.appendChild(mif);
}
mif.style.top = dialog.style.top;
mif.style.left = dialog.style.left;
mif.style.width = width + "px";
mif.style.height = parseInt(dialog.offsetHeight, 10) + "px";
mif.style.display = 'block';
}
}
/* 页面MASK */
function dialogMask() {
doMask(true);
window.onresize = onWinResize;
}
/* 当窗口大小改变时，如果是mask状态，则调整大小，以遮盖整个页面 */
function onWinResize() {
var objMask = document.getElementById(PAGE_MASK_ID);
if (objMask == null) {
return;
}
if (objMask.className != MASK_CLASS_NAME) {
return;
}
var width;
var height;
if (navigator.appName == 'Microsoft Internet Explorer') {
width = document.documentElement.scrollWidth;
height = document.documentElement.scrollHeight;
} else {
width = document.body.scrollWidth;
height = document.body.scrollHeight;
}
objMask.style.width = width + "px";
objMask.style.height = height + "px";
}/* onWinResize */
function doMask(mask) {
var width;
var height;
if (navigator.appName == 'Microsoft Internet Explorer') {
width = document.documentElement.scrollWidth;
height = document.documentElement.scrollHeight;
} else {
if (document.documentElement.scrollHeight) {
width = document.documentElement.scrollWidth;
height = document.documentElement.scrollHeight;
} else {
width = document.body.scrollWidth;
height = document.body.scrollHeight;
}
}
/* 显示MASK */
var objMask = document.getElementById(PAGE_MASK_ID);
if (!objMask) {
objMask = document.createElement("div");
objMask.id = PAGE_MASK_ID;
document.body.appendChild(objMask);
}
objMask.className = mask ? MASK_CLASS_NAME : UNMASK_CLASS_BAME;
objMask.style.width = width + "px";
objMask.style.height = height + "px";
}/* doMask(mask) */
/* 对话框居中，参数：dlgId对话框div的id */
function center(dialog, width) {
if ((typeof dialog) == "string") {
dialog = document.getElementById(dialog);
}
if (dialog == null && dialog.style.display == "none") {
return;
}
var left = 8;
var top = 8;
if (window.innerWidth) {
left = window.pageXOffset + ((window.innerWidth - width) / 2 - 32)
+ "px";
top = window.pageYOffset + ((window.innerHeight - dialog.offsetHeight))
/ 2 + "px";
} else {
var scrolled = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrolled = document.documentElement.scrollTop;
} else if (document.body) {
scrolled = document.body.scrollTop;
}
var doc = document.documentElement;
left = (doc.scrollLeft + (doc.offsetWidth - width) / 2 - 32) + "px";
top = scrolled
+ (document.documentElement.offsetHeight - dialog.offsetHeight)
/ 2 + "px";
}
dialog.style.left = left;
dialog.style.top = top;
}/* center(dlgId, width, height) */
function cancel(dialog) {
var mif = document.getElementById(PAGE_IFRAME_MASK);
if (mif) {
mif.style.display = 'none';
}
if ((typeof dialog) == "string") {
dialog = document.getElementById(dialog);
}
if (dialog != null) {
dialog.className = DIALOG_CLASS_HIDE;
}
dlgunmask();
}/* cancel(dlgId) */
/* 页面unmask */
function dlgunmask() {
var objMask = document.getElementById(PAGE_MASK_ID);
if (objMask != null) {
objMask.className = UNMASK_CLASS_NAME;
}
window.onresize = null;
}
引用
生成的html
<div id="dia" class="dialog-show" style="width: 300px; left: 538px; top: 310.5px;"><u class="f1"></u><u class="f2"></u><u class="f3"></u><div class="d_top"><span>提示</span><a href="javascript:void(0);"><img border="0" src="/rts/images/pupsnow_003.gif"></a></div><div class="d_body"><img border="0" align="absmiddle" src="/rts/images/!.png">预约设备失败，不能预约过去的时间段<br><br><div align="center"><input type="button" class="alert-okButton" value="确定"><input type="button" class="alert-cancelButton" value="取消"></div></div><div class="d_foot"></div><u></u><u></u><u></u></div>
引用
相关css
.dialog-show {
padding: 0px;;
position: absolute;
display: block;
z-index: 5000;
}U {DISPLAY: block;OVERFLOW: hidden;HEIGHT: 1px}
U.f1 {background-color:#5cc;BACKGROUND: #5cc;MARGIN: 0px 3px}
U.f2 {background-color:#5cc;BORDER-RIGHT: #5cc 2px solid;MARGIN: 0px 1px;BORDER-LEFT: #5cc 2px solid}
U.f3 {background-color:#5cc;BORDER-RIGHT: #5cc 1px solid;MARGIN: 0px 1px;BORDER-LEFT: #5cc 1px solid}
.d_top{clear:both;overflow:hidden;background-color:#5cc;height:29px;vertical-align:bottom;}
.d_top a{float:right;margin-top:5px;margin-right:13px;padding-top:3px;width:18px;color:red;text-decoration:none;font-weight:bold;text-align:center;vertical-align:middle;}
.d_top span{float:left;font-size:14px;margin-left:15px;margin-top:8px; color:#FFF; font-weight:bold}
.d_body {BORDER-RIGHT: #5cc 3px solid;BORDER-LEFT: #5cc 3px solid;padding:10px; background-color:#fff; color:#666}
.d_foot{clear:both;overflow:hidden;background-color:#5cc;height:2px;}
分享到：
发表评论
-
js 随机抽取数组元素
2012-09-04 14:22 2350var playList = ['1','2','3','4' ... -
表格内容超出隐藏
2011-12-29 14:31 8361。table的样式要是 table-layout: fixe ... -
js 判断 页面 加载 状态
2011-11-18 17:31 872document.onreadystatechange = f ... -
ajax 回调 函数 传参数
2011-11-14 18:00 1208rpcPost(js_web_root + js_rts ... -
js 根据浏览器添加 load/onload 事件
2011-11-14 10:24 892引用firefox中是load，ie中是onload // ... -
HTML高级教程 表格
2011-08-26 14:10 552你认为已经知道怎么制做表格了吧。当然，你已经了解 table、 ... -
HTML高级教程 亲和力的表单
2011-08-26 14:07 656表单对于残障人士来说是最不容易使用的东西。导航和成文的内容是一 ... -
不符合web标准的target="_blank"标签
2011-08-26 14:04 683我们要在新窗口中打开链接传统的通常做法是在链接后面加targe ... -
JavaScript中取到form的值的方法
2011-08-20 08:41 465<form action="get.do ...
相关推荐
arcgis api for js 自定义弹出信息提示框，可以根据自己需要直接修改css样式即可。
JS弹出层对话框插件源码，包含弹出层对话框和Tooltip提示框，消息框等多种功能，兼容主流浏览器（注：不兼容IE9以下版本的IE浏览器）。内置4种颜色的皮肤，且可以自定义对话框样式，可设置对话框位置。Tooltip可以...
自定义弹出框，包括alert弹出框、confirm弹出选择框、show消息提示框、dialog操作弹出框；
支持自定义弹出窗口插件PopModal是一款支持鼠标滑过信息提示，支持鼠标点击弹出层展示，支持自定义弹出框样式jQuery插件代码。
自定义弹出窗口和遮挡层，效果还不错，附带demo实例
有时候感觉系统自带的提示框太丑了，试试自定义提示框吧，直接引用js即可
JS弹出自定义菜单+对话框+提示框大全.docxJS弹出自定义菜单+对话框+提示框大全.docx
JS可拖动窗口控件,可实现各种DIV窗口自定义及各种DIV弹出提示框 带遮罩层的DIV窗口(对话框)控件 js javascript 对话框
JS弹出自定义菜单+对话框+提示框大全。用于学习
本文介绍了vue如何在用户要关闭当前网页时弹出提示的实现，分享给大家，具体如下： 效果如下图 正常 js 页面处理方式 [removed] = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if ...
Js封装版网页提示框插件，这里面是一些前端开发常用的提示框插件，...这些对网页前端开发都是相当有用处的，每一款效果演示都附有具体的代码调用方法和弹出提示框的具体定义方法。更多使用体验，请您下载源代码参考。
js删除表单和弹出确认对话框 html 源代码 获取table的td以及其值，弹出警告框
flag：弹出框的类型标识，0-5，分别对应警告框，确定取消框，警告&强制执行框，确定取消框2型，自定义弹出框； fun：弹出框的确定点击事件，字符串型(如"ok()")； fun2：弹出框的取消点击事件，字符串型(如"cancel()...
winPos：弹出窗口的位置，支持8种内置位置（c,l,t,r,b,lt,rt,lb,rb）及自定义窗口坐标,默认为c。 各参数意义：c:页面中间,l:页面左侧,t:页面顶部,r:页面右侧,b:页面顶部,lt:左上角,rt:右上角,lb:左下角,rb:右下角 ...
功能很强的js完全仿QQ提示框，可以自定义消息提示、关闭、询问任意形式的提示框，皮肤可以自定义修改，包括颜色，样式等等。非常好用，给大家推荐！~~
vue自定义弹框效果(确认框、提示框) 本文实例为大家分享了vue自定义弹框效果的具体代码，供大家参考，具体内容如下 根据传入的type来判断是确认框或提示框 <template> <transition name="confirm-fade"> ('...
vue自定义全局弹出询问框、输入框、提示框、toast，main.js引用后全局使用，涉及遮罩层样式，自定义组件，子组件套用组件，子组件调用父组件方法，组件属性监听，输入框默认获得焦点，输入框数据双向绑定、组件注册
jQuery手机自定义确认提示框代码是一款手机弹窗提示框，自定义弹窗内容，居左对齐显示，告知需要确认的信息等效果代码。
相对于网上其它弹出窗口组件主要功能是提示信息来说，本组件主要是用来制作窗口中内容较多，页面比较复杂的窗口。本组件的窗口内容面主要是以嵌入iframe框架为主，内容页为一个单独的页面。这样就可以更方便的管理...