`

js自定义对话框

阅读更多
/*
本Js代码用于创建一个自定义的确认窗口,
具体功能包括:自定义窗口标题,自定义窗口内容,是否显示取消按钮,焦点位置设定

Author:liuyouyi

*/
function get_width(){
return (document.body.clientWidth+document.body.scrollLeft);
}
function get_height(){
return (document.body.clientHeight+document.body.scrollTop);
}
function get_left(w){
var bw=document.body.clientWidth;
var bh=document.body.clientHeight;
w=parseFloat(w);
return (bw/2-w/2+document.body.scrollLeft);
}
function get_top(h){
var bw=document.body.clientWidth;
var bh=document.body.clientHeight;
h=parseFloat(h);
return (bh/2-h/2+document.body.scrollTop);
}
function create_mask(){//创建遮罩层的函数
var mask=document.createElement("div");
mask.id="mask";
mask.style.position="absolute";
mask.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=4,opacity=25)";//IE的不透明设置
mask.style.opacity=0.4;//Mozilla的不透明设置
mask.style.background="black";
mask.style.top="0px";
mask.style.left="0px";
mask.style.width=get_width();
mask.style.height=get_height();
mask.style.zIndex=1000;
document.body.appendChild(mask);
}
function create_msgbox(w,h,t){//创建弹出对话框的函数
var box=document.createElement("div") ;
box.id="msgbox";
box.style.position="absolute";
box.style.width=w;
box.style.height=h;
box.style.overflow="visible";
box.innerHTML=t;
box.style.zIndex=1001;
document.body.appendChild(box);
re_pos();
}
function re_mask(){
/*
更改遮罩层的大小,确保在滚动以及窗口大小改变时还可以覆盖所有的内容
*/
var mask=document.getElementById("mask") ;
if(null==mask)return;
mask.style.width=get_width()+"px";
mask.style.height=get_height()+"px";
}
function re_pos(){
/*
更改弹出对话框层的位置,确保在滚动以及窗口大小改变时一直保持在网页的最中间
*/
var box=document.getElementById("msgbox");
if(null!=box){
var w=box.style.width;
var h=box.style.height;
box.style.left=get_left(w)+"px";
box.style.top=get_top(h)+"px";
}
}
function remove(){
/*
清除遮罩层以及弹出的对话框
*/
var mask=document.getElementById("mask");
var msgbox=document.getElementById("msgbox");
if(null==mask&&null==msgbox)return;
document.body.removeChild(mask);
document.body.removeChild(msgbox);
}
function msgbox(title,text,func,cancel,focus){
/*
参数列表说明:
title :弹出对话框的标题,标题内容最好在25个字符内,否则会导致显示图片的异常
text  :弹出对话框的内容,可以使用HTML代码,例如<font color='red'>删除么?</font>,如果直接带入函数,注意转义
func  :弹出对话框点击确认后执行的函数,需要写全函数的引用,例如add(),如果直接带入函数,注意转义。
cancel:弹出对话框是否显示取消按钮,为空的话不显示,为1时显示
focus :弹出对话框焦点的位置,0焦点在确认按钮上,1在取消按钮上,为空时默认在确认按钮上

Author:Jedliu
Blog  :Jedliu.cublog.cn
【网页转载请保留版权信息,实际使用时可以除去该信息】
*/
create_mask();
var temp="<table width=\"355\" height=\"127\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"font:14px Verdana, Geneva, Arial, Helvetica, sans-serif\">";
temp+="<tr><td background=\"msgbox/alert_01.gif\" width=\"355\" height=\"22\" style=\"padding-left:8px;padding-top:2px;font-weight: bold;color:white;\">"+title+"</td></tr>";
temp+="<tr><td background=\"msgbox/alert_02.gif\" width=\"355\" height=\"75\" style=\"padding-left:6px;padding-right:2px;padding-bottom:10px;\">&nbsp;<img src=\"msgbox/alert_mark.gif\">&nbsp;"+text+"</td>";
temp+="</tr><tr><td width=\"355\" height=\"22\" align=\"center\" background=\"msgbox/alert_03.gif\"><input name=\"msgconfirmb\" type=\"button\" id=\"msgconfirmb\" value=\"确认\" onclick=\"remove();"+func+";\">";
if(null!=cancel){temp+="&nbsp;&nbsp;<input name=\"msgcancelb\" type=\"button\" id=\"msgcancelb\" value=\"取消\" onclick=\"remove();\"></td>";}
temp+="</tr><tr><td background=\"msgbox/alert_04.gif\" width=\"355\" height=\"8\"></td></tr></table>";
create_msgbox(400,200,temp);
if(focus==0||focus=="0"||null==focus){document.getElementById("msgconfirmb").focus();}
else if(focus==1||focus=="1"){document.getElementById("msgcancelb").focus();}
}
function re_show(){
/*
重新显示遮罩层以及弹出窗口元素
*/
re_pos();
re_mask();
}
function load_func(){
/*
加载函数,覆盖window的onresize和onscroll函数
*/
window.onresize=re_show;
window.onscroll=re_show;
}
分享到:
评论

相关推荐

    微信小程序自定义对话框

    在微信小程序的开发过程中,有时候我们可能需要实现一些更加个性化的功能,比如自定义对话框。自定义对话框可以提供比系统默认对话框更丰富的样式和交互,更好地满足用户界面和用户体验的需求。本文将深入探讨如何在...

    小程序自定义对话框

    为了满足这种需求,本项目实现了一个自定义对话框的功能,使得在微信小程序中可以更加灵活地定制对话框的样式和内容。 一、自定义对话框的实现原理 1. 组件化思想:自定义对话框的核心是利用微信小程序的自定义组件...

    自定义对话框样式

    在本主题中,我们将深入探讨如何在各种编程环境中自定义对话框样式。 在Android开发中,我们可以使用AlertDialog.Builder来创建自定义对话框。通过设置不同的参数,如标题、消息、按钮和视图,我们可以改变对话框的...

    自定义对话框源码及Demo

    在ASP.NET中,自定义对话框通常通过HTML、CSS和JavaScript(或者使用Ajax和jQuery)与服务器端的C#代码交互来实现。 4. **对话框的外观定制**: 自定义对话框可以改变标题头和内容,这通常涉及到对对话框控件的属性...

    已封装自定义对话框

    下面,我们将深入探讨这一话题,包括JavaScript的基本概念、自定义对话框的实现方法以及如何与其他编程语言如.NET ASP、JS、JSP和PHP进行交互。 首先,JavaScript的核心概念包括变量、数据类型、控制流(如条件语句...

    jquery自定义对话框

    本文将深入探讨如何在jQuery中创建自定义对话框,以及使用该功能时的一些关键知识点。 首先,标题“jquery自定义对话框”指的是在jQuery中实现一个可以自定义的弹出窗口,通常这种窗口被称为模态对话框或警告对话框...

    自定义jquery对话框

    最后,`mydialog.js`文件可能包含了实现自定义对话框功能的JavaScript代码。开发者通常会在这样的文件中编写对话框的初始化、事件处理和逻辑控制。例如,它可能包含与服务器通信、处理用户输入、验证表单等复杂操作...

    自定义对话框

    在Web开发中,自定义对话框是一个至关重要的技术,它允许开发者根据具体需求设计和实现具有特定功能和样式的对话窗口。自定义对话框通常用于显示警告、确认、输入信息或者进行更复杂的交互操作,而不仅仅是系统默认...

    多种类型自定义对话框插件jDialog.zip

    自定义对话框是这种交互性的一种体现,它能够提供更丰富的信息展示和用户反馈方式。`jDialog`插件就是一个这样的工具,专门用于创建基于jQuery的多种类型的自定义对话框,它具有轻量级、易用且功能丰富的特点。 ...

    微信小程序自定义对话框__

    在微信小程序开发中,自定义对话框是一种常见的用户交互组件,它允许开发者根据自己的需求定制对话框的样式、内容和功能。本篇将深入探讨如何实现微信小程序中的自定义对话框,包括弹出和隐藏的动画效果。 首先,...

    用JQuery 实现的自定义对话框

    只需简单地引用相关JavaScript就能得到丰富的自定义对话框功能。 插件功能特点: 允许通过CSS进行外观控制。 可以任意把面页的元素作为对话框显示。 当对话框激活时,对话框外的任何元素不能接受鼠标操作。 对话框...

    JS弹出层对话框,Tooltip提示,Msg消息框

    内置4种颜色的皮肤,且可以自定义对话框样式,可设置对话框位置。Tooltip可以自定义样式(空心、实心自由设置),并且有上下左右共12个位置的方位选择。插件参数很多(见源码),可以组合使用,具体调用方法请参考...

    微信小程序 自定义对话框实例详解

    通过合理地组织 WXML 结构,结合 JS 逻辑控制对话框的显示和隐藏,以及运用动画 API 提升用户体验,可以创建出符合设计需求的自定义对话框。此外,为了使对话框更加灵活,你可以考虑添加更多的功能,如自定义按钮...

    jQuery多种类型自定义对话框插件jDialog源码.zip

    jQuery作为一款强大的JavaScript库,提供了丰富的插件来扩展其功能,其中jDialog是一款功能丰富的自定义对话框插件。本文将深入探讨jDialog的核心特性、使用方法以及其实现原理。 首先,jDialog是基于jQuery构建的...

    dojo自定义对话框

    本文将深入探讨如何使用Dojo来创建自定义对话框,并结合ArcGIS API进行集成应用。 首先,Dojo的Dialog组件是实现对话框功能的核心。Dialog允许我们以模态或非模态方式显示信息,用户可以与之交互,然后进行确认、...

    自定义可扩展对话框

    自定义对话框是指根据应用的需求,使用编程语言和UI框架来构建的具有特定功能和样式的对话窗口。相比系统默认的对话框,自定义对话框可以提供更多的灵活性和控制权,使开发者能够更好地与用户进行交互,提升用户体验...

    用js实现的自定义的对话框的实现代码

    【JavaScript 自定义对话框实现】 在网页开发中,与用户进行交互是不可或缺的一部分,而`alert()`函数是最常见的用于提示用户的方式。然而,`alert()`虽然简单易用,但其样式固定、功能有限,无法满足现代网页对于...

Global site tag (gtag.js) - Google Analytics