當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript - JavaScript自定义弹出对话框
生活随笔
收集整理的這篇文章主要介紹了
JavaScript - JavaScript自定义弹出对话框
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本腳本使用自定義的浮動窗口替代瀏覽器自己的對話框，效果非常不錯。包含Error | Warning | Success | Prompt 四個對話框窗口 兼容性：IE6+ FireFox2+ Opera9+ 在網頁<head>區添加以下代碼
<style type="text/css">
<!--
#content {padding:20px}
#dialog {position:absolute; width:425px; padding:10px; z-index:200; background:#fff}
#dialog-header {display:block; position:relative; width:411px; padding:3px 6px 7px; height:14px; font-size:14px; font-weight:bold}
#dialog-title {float:left}
#dialog-close {float:right; cursor:pointer; margin:3px 3px 0 0; height:11px; width:11px; background:url(dialog_close.gif) no-repeat}
#dialog-content {display:block; height:160px; padding:6px; color:#666666; font-size:13px}
#dialog-mask {position:absolute; top:0; left:0; min-height:100%; width:100%; background:#FFF; opacity:.75; filter:alpha(opacity=75); z-index:100}
.error {background:#fff url(error_bg.jpg) bottom right no-repeat; border:1px solid #924949; border-top:none}
.errorheader {background:url(error_header.gif) repeat-x; color:#6f2c2c; border:1px solid #924949; border-bottom:none}
.warning {background:#fff url(warning_bg.jpg) bottom right no-repeat; border:1px solid #c5a524; border-top:none}
.warningheader {background:url(warning_header.gif) repeat-x; color:#957c17; border:1px solid #c5a524; border-bottom:none}
.success {background:#fff url(success_bg.jpg) bottom right no-repeat; border:1px solid #60a174; border-top:none}
.successheader {background:url(success_header.gif) repeat-x; color:#3c7f51; border:1px solid #60a174; border-bottom:none}
.prompt {background:#fff url(prompt_bg.jpg) bottom right no-repeat; border:1px solid #4f6d81; border-top:none}
.promptheader {background:url(prompt_header.gif) repeat-x; color:#355468; border:1px solid #4f6d81; border-bottom:none}
-->
</style>
<script type="text/javascript">
/******************************************************
*????
JavaScript自定義彈出對話框
Share JavaScript (http://www.ShareJS.com)
* 使用此腳本程序，請保留此聲明
* 獲取此腳本以及更多的JavaScript程序，請訪問 http://www.ShareJS.com
******************************************************/
<!--
// global variables //
var TIMER = 5;
var SPEED = 10;
var WRAPPER = 'content';
// calculate the current window width //
function pageWidth() {
????return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}
// calculate the current window height //
function pageHeight() {
????return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}
// calculate the current window vertical offset //
function topPosition() {
????return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
}
// calculate the position starting at the left of the window //
function leftPosition() {
????return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
}
// build/show the dialog box, populate the data and call the fadeDialog function //
function showDialog(title,message,type,autohide) {
????if(!type) {
????????type = 'error';
????}
????var dialog;
????var dialogheader;
????var dialogclose;
????var dialogtitle;
????var dialogcontent;
????var dialogmask;
????if(!document.getElementById('dialog')) {
????????dialog = document.createElement('div');
????????dialog.id = 'dialog';
????????dialogheader = document.createElement('div');
????????dialogheader.id = 'dialog-header';
????????dialogtitle = document.createElement('div');
????????dialogtitle.id = 'dialog-title';
????????dialogclose = document.createElement('div');
????????dialogclose.id = 'dialog-close'
????????dialogcontent = document.createElement('div');
????????dialogcontent.id = 'dialog-content';
????????dialogmask = document.createElement('div');
????????dialogmask.id = 'dialog-mask';
????????document.body.appendChild(dialogmask);
????????document.body.appendChild(dialog);
????????dialog.appendChild(dialogheader);
????????dialogheader.appendChild(dialogtitle);
????????dialogheader.appendChild(dialogclose);
????????dialog.appendChild(dialogcontent);;
????????dialogclose.setAttribute('
????????dialogclose.onclick = hideDialog;
????} else {
????????dialog = document.getElementById('dialog');
????????dialogheader = document.getElementById('dialog-header');
????????dialogtitle = document.getElementById('dialog-title');
????????dialogclose = document.getElementById('dialog-close');
????????dialogcontent = document.getElementById('dialog-content');
????????dialogmask = document.getElementById('dialog-mask');
????????dialogmask.style.visibility = "visible";
????????dialog.style.visibility = "visible";
????}
????dialog.style.opacity = .00;
????dialog.style.filter = 'alpha(opacity=0)';
????dialog.alpha = 0;
????var width = pageWidth();
????var height = pageHeight();
????var left = leftPosition();
????var top = topPosition();
????var dialogwidth = dialog.offsetWidth;
????var dialogheight = dialog.offsetHeight;
????var topposition = top + (height / 3) - (dialogheight / 2);
????var leftposition = left + (width / 2) - (dialogwidth / 2);
????dialog.style.top = topposition + "px";
????dialog.style.left = leftposition + "px";
????dialogheader.className = type + "header";
????dialogtitle.innerHTML = title;
????dialogcontent.className = type;
????dialogcontent.innerHTML = message;
????var content = document.getElementById(WRAPPER);
????dialogmask.style.height = content.offsetHeight + 'px';
????dialog.timer = setInterval("fadeDialog(1)", TIMER);
????if(autohide) {
????????dialogclose.style.visibility = "hidden";
????????window.setTimeout("hideDialog()", (autohide * 1000));
????} else {
????????dialogclose.style.visibility = "visible";
????}
}
// hide the dialog box //
function hideDialog() {
????var dialog = document.getElementById('dialog');
????clearInterval(dialog.timer);
????dialog.timer = setInterval("fadeDialog(0)", TIMER);
}
// fade-in the dialog box //
function fadeDialog(flag) {
????if(flag == null) {
????????flag = 1;
????}
????var dialog = document.getElementById('dialog');
????var value;
????if(flag == 1) {
????????value = dialog.alpha + SPEED;
????} else {
????????value = dialog.alpha - SPEED;
????}
????dialog.alpha = value;
????dialog.style.opacity = (value / 100);
????dialog.style.filter = 'alpha(opacity=' + value + ')';
????if(value >= 99) {
????????clearInterval(dialog.timer);
????????dialog.timer = null;
????} else if(value <= 1) {
????????dialog.style.visibility = "hidden";
????????document.getElementById('dialog-mask').style.visibility = "hidden";
????????clearInterval(dialog.timer);
????}
}
-->
</script> 在網頁<body>區添加以下代碼 <div id="content">
<p>
<a href="javascript:showDialog('Error','You have encountered a critical error.','error',2);">Error</a> |
<a href="javascript:showDialog('Warning','You must enter all required information.','warning');">Warning</a> |
<a href="javascript:showDialog('Success','Your request has been successfully received.','success');">Success</a> |
<a href="javascript:showDialog('Confirmation','Are you sure you want to delete the entry?','prompt');">Prompt</a>
</p>
</div>
<style type="text/css">
<!--
#content {padding:20px}
#dialog {position:absolute; width:425px; padding:10px; z-index:200; background:#fff}
#dialog-header {display:block; position:relative; width:411px; padding:3px 6px 7px; height:14px; font-size:14px; font-weight:bold}
#dialog-title {float:left}
#dialog-close {float:right; cursor:pointer; margin:3px 3px 0 0; height:11px; width:11px; background:url(dialog_close.gif) no-repeat}
#dialog-content {display:block; height:160px; padding:6px; color:#666666; font-size:13px}
#dialog-mask {position:absolute; top:0; left:0; min-height:100%; width:100%; background:#FFF; opacity:.75; filter:alpha(opacity=75); z-index:100}
.error {background:#fff url(error_bg.jpg) bottom right no-repeat; border:1px solid #924949; border-top:none}
.errorheader {background:url(error_header.gif) repeat-x; color:#6f2c2c; border:1px solid #924949; border-bottom:none}
.warning {background:#fff url(warning_bg.jpg) bottom right no-repeat; border:1px solid #c5a524; border-top:none}
.warningheader {background:url(warning_header.gif) repeat-x; color:#957c17; border:1px solid #c5a524; border-bottom:none}
.success {background:#fff url(success_bg.jpg) bottom right no-repeat; border:1px solid #60a174; border-top:none}
.successheader {background:url(success_header.gif) repeat-x; color:#3c7f51; border:1px solid #60a174; border-bottom:none}
.prompt {background:#fff url(prompt_bg.jpg) bottom right no-repeat; border:1px solid #4f6d81; border-top:none}
.promptheader {background:url(prompt_header.gif) repeat-x; color:#355468; border:1px solid #4f6d81; border-bottom:none}
-->
</style>
<script type="text/javascript">
/******************************************************
*????
JavaScript自定義彈出對話框
Share JavaScript (http://www.ShareJS.com)
* 使用此腳本程序，請保留此聲明
* 獲取此腳本以及更多的JavaScript程序，請訪問 http://www.ShareJS.com
******************************************************/
<!--
// global variables //
var TIMER = 5;
var SPEED = 10;
var WRAPPER = 'content';
// calculate the current window width //
function pageWidth() {
????return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}
// calculate the current window height //
function pageHeight() {
????return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}
// calculate the current window vertical offset //
function topPosition() {
????return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
}
// calculate the position starting at the left of the window //
function leftPosition() {
????return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
}
// build/show the dialog box, populate the data and call the fadeDialog function //
function showDialog(title,message,type,autohide) {
????if(!type) {
????????type = 'error';
????}
????var dialog;
????var dialogheader;
????var dialogclose;
????var dialogtitle;
????var dialogcontent;
????var dialogmask;
????if(!document.getElementById('dialog')) {
????????dialog = document.createElement('div');
????????dialog.id = 'dialog';
????????dialogheader = document.createElement('div');
????????dialogheader.id = 'dialog-header';
????????dialogtitle = document.createElement('div');
????????dialogtitle.id = 'dialog-title';
????????dialogclose = document.createElement('div');
????????dialogclose.id = 'dialog-close'
????????dialogcontent = document.createElement('div');
????????dialogcontent.id = 'dialog-content';
????????dialogmask = document.createElement('div');
????????dialogmask.id = 'dialog-mask';
????????document.body.appendChild(dialogmask);
????????document.body.appendChild(dialog);
????????dialog.appendChild(dialogheader);
????????dialogheader.appendChild(dialogtitle);
????????dialogheader.appendChild(dialogclose);
????????dialog.appendChild(dialogcontent);;
????????dialogclose.setAttribute('
????????dialogclose.onclick = hideDialog;
????} else {
????????dialog = document.getElementById('dialog');
????????dialogheader = document.getElementById('dialog-header');
????????dialogtitle = document.getElementById('dialog-title');
????????dialogclose = document.getElementById('dialog-close');
????????dialogcontent = document.getElementById('dialog-content');
????????dialogmask = document.getElementById('dialog-mask');
????????dialogmask.style.visibility = "visible";
????????dialog.style.visibility = "visible";
????}
????dialog.style.opacity = .00;
????dialog.style.filter = 'alpha(opacity=0)';
????dialog.alpha = 0;
????var width = pageWidth();
????var height = pageHeight();
????var left = leftPosition();
????var top = topPosition();
????var dialogwidth = dialog.offsetWidth;
????var dialogheight = dialog.offsetHeight;
????var topposition = top + (height / 3) - (dialogheight / 2);
????var leftposition = left + (width / 2) - (dialogwidth / 2);
????dialog.style.top = topposition + "px";
????dialog.style.left = leftposition + "px";
????dialogheader.className = type + "header";
????dialogtitle.innerHTML = title;
????dialogcontent.className = type;
????dialogcontent.innerHTML = message;
????var content = document.getElementById(WRAPPER);
????dialogmask.style.height = content.offsetHeight + 'px';
????dialog.timer = setInterval("fadeDialog(1)", TIMER);
????if(autohide) {
????????dialogclose.style.visibility = "hidden";
????????window.setTimeout("hideDialog()", (autohide * 1000));
????} else {
????????dialogclose.style.visibility = "visible";
????}
}
// hide the dialog box //
function hideDialog() {
????var dialog = document.getElementById('dialog');
????clearInterval(dialog.timer);
????dialog.timer = setInterval("fadeDialog(0)", TIMER);
}
// fade-in the dialog box //
function fadeDialog(flag) {
????if(flag == null) {
????????flag = 1;
????}
????var dialog = document.getElementById('dialog');
????var value;
????if(flag == 1) {
????????value = dialog.alpha + SPEED;
????} else {
????????value = dialog.alpha - SPEED;
????}
????dialog.alpha = value;
????dialog.style.opacity = (value / 100);
????dialog.style.filter = 'alpha(opacity=' + value + ')';
????if(value >= 99) {
????????clearInterval(dialog.timer);
????????dialog.timer = null;
????} else if(value <= 1) {
????????dialog.style.visibility = "hidden";
????????document.getElementById('dialog-mask').style.visibility = "hidden";
????????clearInterval(dialog.timer);
????}
}
-->
</script> 在網頁<body>區添加以下代碼 <div id="content">
<p>
<a href="javascript:showDialog('Error','You have encountered a critical error.','error',2);">Error</a> |
<a href="javascript:showDialog('Warning','You must enter all required information.','warning');">Warning</a> |
<a href="javascript:showDialog('Success','Your request has been successfully received.','success');">Success</a> |
<a href="javascript:showDialog('Confirmation','Are you sure you want to delete the entry?','prompt');">Prompt</a>
</p>
</div>
轉載于:https://blog.51cto.com/luoyi/311553
總結
以上是生活随笔為你收集整理的JavaScript - JavaScript自定义弹出对话框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 傻瓜教程：asp.net(c#) 如何配
- 下一篇： 网络与安全不分家