仿Window.alert()效果的自定义弹出层效果

最新推荐文章于 2023-02-02 10:54:31 发布
最新推荐文章于 2023-02-02 10:54:31 发布
阅读量3.5k 收藏
点赞数
分类专栏： JavaScript||Jquery||Ext 文章标签： class function div javascript windows filter

CSS：样式

.box_table{
    border-collapse: collapse;
    border-spacing: 0;
}
.box_t_l{ width:6px; height:6px; background-image:url(../images/orange/box_t_l.png);_background-image:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/orange/box_t_l.png', sizingMethod='scale');}
 
.box_tb_bg{ width:auto;height:6px; background-image:url(../images/orange/box_bg.png);_background-image:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/orange/box_bg.png', sizingMethod='scale');}
 
.box_t_r{ width:6px; height:6px;background-image:url(../images/orange/box_t_r.png);_background-image:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/orange/box_t_r.png', sizingMethod='scale');}
 
.box_c_bg{width:6px; background-image:url(../images/orange/box_bg.png);_background-image:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/orange/box_bg.png', sizingMethod='scale');}
 
.box_h,.box_h2{ height:32px; line-height:32px; background-color:#fff7ea; border-bottom:1px #ffe7c3 solid; color:#333; font-weight:bold; font-size:13px; padding-left:15px;position:relative}
.box_h2{ border-bottom:0;}
.box_close{ width:10px; height:10px; position:absolute; right:15px; top:10px; cursor:pointer}
.h_r_t_bg2{ height:auto; padding-bottom:10px;}
.c_btn a{width:59px; height:23px;line-height:23px; display:inline-block; background:url(../images/orange/c_btn.gif) no-repeat; text-align:center; color:#3e3e3e; cursor:pointer;}
 
.clear{clear:both;}
.ml10{ margin-left:10px;}
.box_b_l{ width:6px; height:6px;background-image:url(../images/orange/box_b_l.png);_background-image:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/orange/box_b_l.png', sizingMethod='scale');}
.box_b_r{ width:6px; height:6px; background-image:url(../images/orange/box_b_r.png);_background-image:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/orange/box_b_r.png', sizingMethod='scale');}
 .msg_main
{
    font-weight: normal;
    height: auto;
    border: 1px #c7c7c7 solid;
    position: relative;
    background-color: #fff;
}
 .msg_tb
{
    width: 100%;
    height: 100%;
}
.align_btn
{
    margin: 20px 10px 10px 0;
    display: inline;
}
.f_right
{
    float: right;
    margin-right: 5px;
    position: relative;
}

JavaScript: 

  /*
    本Js代码用于创建一个自定义的确认窗口,
    具体功能包括:自定义窗口标题,自定义窗口内容,是否显示取消按钮,焦点位置设定
    */
    var windows_fun;
    var windows_alert_fun;
    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 = window.screen.availHeight;
        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=5)"; //IE的不透明设置
        mask.style.opacity = 0.1; //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 + "px"; 
        box.style.height = h + "px"; 
        box.style.left = "50%";
        box.style.top = "50%";
        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) {
        /*  
        参数列表说明:
        title :弹出对话框的标题,标题内容最好在25个字符内,否则会导致显示图片的异常               
        text :弹出对话框的内容,可以使用HTML代码,例如<font color='red'>删除么?</font>,如果直接带入函数,注意转义
        func :弹出对话框点击确认后执行的函数,需要写全函数的引用,例如add(),如果直接带入函数,注意转义。
 
        cancel:弹出对话框是否显示取消按钮,为空的话不显示,为1时显示
 
        focus :弹出对话框焦点的位置,0焦点在确认按钮上,1在取消按钮上,为空时默认在确认按钮上
 
        */

        remove();
        windows_fun = func;

        create_mask();

        var temp = "";

        temp += '<table border="0" cellpadding="0" cellspacing="0" class="box_table msg_tb">' +
		  '<tr>' +
			'<td class="box_t_l"></td>' +
			'<td class="box_tb_bg"></td>' +
			'<td class="box_t_r"></td>' +
		 ' </tr>' +
		  '<tr>' +
			'<td class="box_c_bg"></td>' +
			'<td>' +
				'<div class="msg_main">' +
					'<div class="box_h2">' + title +
					    '<div class="box_close"><img src="../images/orange/w_close.gif" width="11" height="11" οnclick="remove();" /></div>' +
				    '</div>' +
		            '<div class="h_r_t_bg2">' +
						'<div class="" style="padding:15px 0px 10px 15px;line-height:20px;">' +
						    text +
						'</div>' +
						'<div class="align_btn" style="padding:5px 0px 10px 0px;"><span class="c_btn ml10 f_right" id="msgcancelb"><a href="javascript:remove();">取消</a></span><span class="c_btn ml10 f_right" id="msgconfirmb"><a href="javascript:remove();windows_fun(\'yes\');">确定</a></span></div>' +
						'<div class="clear"></div>' +
				 ' </div>' +
				'</div>		' +
			'</td>' +
			'<td class="box_c_bg"></td>' +
		  '</tr>' +
		 ' <tr>' +
			'<td class="box_b_l"></td>' +
			'<td class="box_tb_bg"></td>' +
			'<td class="box_b_r"></td>' +
		  '</tr>' +
		'</table>';


        create_msgbox(300, 100, temp);
    }
    function chkmsgbox(title, text, func) {
        remove();
        windows_fun = func;
        create_mask();
        var temp = "";
        temp += '<table border="0" cellpadding="0" cellspacing="0" class="box_table msg_tb">' +
		  '<tr>' +
			'<td class="box_t_l"></td>' +
			'<td class="box_tb_bg"></td>' +
			'<td class="box_t_r"></td>' +
		 ' </tr>' +
		  '<tr>' +
			'<td class="box_c_bg"></td>' +
			'<td>' +
				'<div class="msg_main">' +
					'<div class="box_h2">' + title +
					    '<div class="box_close"><img src="../images/orange/w_close.gif" width="11" height="11" οnclick="remove();" /></div>' +
				    '</div>' +
		            '<div class="h_r_t_bg2">' +
						'<div class="" style="padding:15px 0px 10px 15px;line-height:20px;">' +
						    text +
						'</div>' +
						'<div class="align_btn" style="padding:5px 0px 10px 0px;"><span class="c_btn ml10 f_right" id="msgcancelb"><a href="javascript:remove();">取消</a></span><span class="c_btn ml10 f_right" id="msgconfirmb"><a href="javascript:windows_fun(\'yes\');">确定</a></span></div>' +
						'<div class="clear"></div>' +
				 ' </div>' +
				'</div>		' +
			'</td>' +
			'<td class="box_c_bg"></td>' +
		  '</tr>' +
		 ' <tr>' +
			'<td class="box_b_l"></td>' +
			'<td class="box_tb_bg"></td>' +
			'<td class="box_b_r"></td>' +
		  '</tr>' +
		'</table>';


        create_msgbox(300, 100, temp);
    }
    function re_show() {
        /*
        重新显示遮罩层以及弹出窗口元素
 
        */
        re_pos();
        re_mask();
    }
    function load_func() {
        /*
        加载函数,覆盖window的onresize和onscroll函数
        */
        window.onresize = re_show;
        window.onscroll = re_show;
    }
    //信息

    function windowsAlert(title, text, func) {
        /*  
        参数列表说明:
        title :弹出对话框的标题,标题内容最好在25个字符内,否则会导致显示图片的异常               
        text :弹出对话框的内容,可以使用HTML代码,例如<font color='red'>删除么?</font>,如果直接带入函数,注意转义
        func :弹出对话框点击确认后执行的函数,需要写全函数的引用,例如add(),如果直接带入函数,注意转义。
 
        cancel:弹出对话框是否显示取消按钮,为空的话不显示,为1时显示
 
        focus :弹出对话框焦点的位置,0焦点在确认按钮上,1在取消按钮上,为空时默认在确认按钮上

        */
        remove();
        var runFun = '';
        if (func != undefined) {
            windows_alert_fun = func;
            runFun = 'windows_alert_fun();';
        }
        create_mask();

        var temp = "";

        temp += '<table border="0" cellpadding="0" cellspacing="0" class="box_table msg_tb">' +
		  '<tr>' +
			'<td class="box_t_l"></td>' +
			'<td class="box_tb_bg"></td>' +
			'<td class="box_t_r"></td>' +
		 ' </tr>' +
		  '<tr>' +
			'<td class="box_c_bg"></td>' +
			'<td>' +
				'<div class="msg_main">' +
					'<div class="box_h2">' + title +
					    '<div class="box_close"><img src="../images/orange/w_close.gif" width="11" height="11" οnclick="remove();' + runFun + '" /></div>' +
				    '</div>' +
		            '<div class="h_r_t_bg2">' +
						'<div class="" style="padding:15px 0px 10px 15px;line-height:20px;">' +
						    text +
						'</div>' +
						'<div class="align_btn" style="padding:105px 0px 15px 15px;"><span class="f_right c_btn ml10" id="msgconfirmb"><a href="javascript:remove();' + runFun + '">确定</a></span>' +
						'<div class="clear"></div>' +
				 ' </div>' +
				'</div>		' +
			'</td>' +
			'<td class="box_c_bg"></td>' +
		  '</tr>' +
		 ' <tr>' +
			'<td class="box_b_l"></td>' +
			'<td class="box_tb_bg"></td>' +
			'<td class="box_b_r"></td>' +
		  '</tr>' +
		'</table>';


        create_msgbox(300, 100, temp);
    }

    function re_pos_byElementId(elementId) {
        /*
        更改弹出对话框层的位置,确保在滚动以及窗口大小改变时一直保持在网页的最中间
        */
        var box = document.getElementById(elementId);
        if (null != box) {
            var w = box.style.width;
            var h = box.style.height;
            box.style.left = get_left(w) + "px";

            if (h != "") {
                box.style.top = get_top(h) + "px";
            }
            else {
                //box.style.top = "250px";
                box.style.top = get_top(box.clientHeight) + "px";
            }

        }
    }
    function mousePosition(e) {
        if (e.pageX || e.pageY) {
            return { x: e.pageX, y: e.pageY };
        }
        return {
            x: e.clientX + document.body.scrollLeft - document.body.clientLeft,
            y: e.clientY + document.body.scrollTop - document.body.clientTop
        };
    }

    function mouseMove(ev) {
        ev = ev || window.event;
        var mousePos = mousePosition(ev);
        var width = parseInt(String(document.getElementById('div1').style.width).substring(0, String(document.getElementById('div1').style.width).indexOf('px')));
        var height = parseInt(String(document.getElementById('div1').style.height).substring(0, String(document.getElementById('div1').style.height).indexOf('px')));

        if ((mousePos.x + width) > document.body.offsetWidth) {
            document.getElementById('div1').style.left = (mousePos.x - width) + 'px';
        }
        else {
            document.getElementById('div1').style.left = mousePos.x + 'px';
        }
        if ((mousePos.y + height) > document.body.scrollHeight) {
            document.getElementById('div1').style.top = (mousePos.y - height) + 'px';
        }
        else {
            document.getElementById('div1').style.top = mousePos.y + 'px';
        }
    }

    用法：$(document).ready(function(){

 

 load_func();
WindowsAlert("确认窗口","确定要删除吗？",func_ok,1);

});
IT好人-杨大山
关注
专栏目录
JS实现自定义alert,自定义window.open
NIRVANA的专栏
06-07 2454
 var ServarPath = /WebSite/;/**********************************************************************///通用函数/**********************************************************************/function $(objectID)
layer ajax 弹出框,layui.layer_常用提示框的用法_弹出层
weixin_35779845的博客
08-05 739
一 layer的普通提示新直能分支调二浏页器朋代说框效果：代码：layer.alert('次案件已回库，请选择其他案件', {icon: 5,title: "提示"});tit享器哈班其础件事是架考发求关通互面待需了le属性不设置时默认为“信息”是能览调不页新代些事几求事都时学下是事功过。如下二需朋者说上事是础一发一开程和开数的目前间 layer 带输入框新直能分支调二浏页器朋代说，事刚的提示框效...
仿window.alert()效果的确认窗口
12-24
仿window.alert()效果的确认窗口
window.alert弹窗自定义
最新发布
qq_70733892的博客
02-02 1246
window.alert弹窗自定义
JS实现层上下部分可拖动，仿Windows垂直调整代码
chuzhenbin的专栏
05-06 1083
转自：http://www.veryhuo.com/a/view/44965.html     JS实现层上下部分可拖动，仿Windows垂直调整代码。非常经典的Windows窗口效果，但是您估计没有在网页上看到过，兼容性非常好。在IE或火狐以及Chrome等浏览器都能正常运行。 　　操作方法：上下拖动红条改变显示区域高度，往上则全部显示下部的内容，往下拖则全部显示上部的内容，推荐给大
自定义window.alert对话框JS代码
05-15
非常不错的JS特效。一个自定义样式的alert弹出对话框。比系统默认的美观许多。
layer.alert自定义关闭回调事件的方法
10-16
在实际项目中，如果layer.alert是在一个iframe中弹出的，我们可能需要关闭整个iframe层，而不仅仅是alert弹窗。这时，我们可以使用`parent.layer.getFrameIndex()`和`parent.layer.close()`方法来实现。例如： ```...
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
10-16
在layer插件中，`parent.layer.closeAll()`方法可以用来关闭所有打开的弹出层，而在需要关闭特定的弹出层时，可以先通过`parent.layer.getFrameIndex(window.name)`方法获取到当前iframe层的索引，然后通过`parent....
layer弹出层自定义提交取消按钮的例子
12-01
8. **JS文件引用**：在弹出层加载的界面中，通过`@layout`指令引用了多个外部资源，如`laydate`日期插件、`sweet-alert`警告对话框和`layer`本身。`send_edit.js` 文件是专门处理弹出层编辑操作的JavaScript文件，...
js仿win10桌面弹出窗口提示特效代码
03-20
js仿win10桌面弹出窗口提示代码是一款windows10桌面弹出窗口通知，右下角弹出浮动窗口提示代码。
重写window.alert方法
06-12
重写window.alert方法 重写window.alert方法
js中style属性以及仿制window.alert()功能和自定义
墨尔本,晴
09-14 196
JS操作css 下面是引用的。。很不错的总结、、 [quote] 使用js操作css属性的写法是有一定的规律的： 1、对于没有中划线的css属性一般直接使用style.属性名即可。 如：obj.style.margin，obj.style.width，obj.style.left，obj.style.position等。 2、对于含有中划线的css属性，将每个中划线去掉并将每个中划线后...
新发的日常小实验——javascript自定义alert窗口样式
linxinfa的专栏
10-22 2108
文章目录一、前言二、普通的alert窗口三、自定义alert窗口 一、前言 最近在搞一个支付的网页，用到alert窗口，而普通的alert窗口样式比较呆板，我们可以自己重写alert窗口。 二、普通的alert窗口 我们普通的alert窗口样式比较呆板，如下 <!DOCTYPE html> <html> <head> </head> <body> </body> <script type="text/javascript"&g
一个简单的自定义alert方法
ynb007的专栏
04-16 1991
本文仅仅是为了记住过去经常用到却又总是要重新编写的一些代码片段和一些个人想法，仅此而已。 下面是代码： 注：请先引入jquery库 [code="javascript"] window.alert = function(msg){ var config = { fontSize:'12px', backgroundColor:'#696969', fon...
12. Window alert() 方法
enlyhua的专栏
07-31 832
定义和用法 alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。 语法:alert(message)实例<html> <head> <script type="text/javascript"> function display_alert() { alert("I am an alert box!!") } </script> </head> <body><in
修改window.alert方法
退思园
01-22 4435
修改window.alert方法 JScript code <!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->script>var flag=true;//定义状态标志var alertFun=window.a
模拟Window Alert弹出框 支持拖动以及ESC键盘退出
Web前端开发——Kingwell's Blog
06-28 153
基本我自己封装的一些常用函数：KW.js   /* Kingwell Javascript library Author:Jinhua.leng#gmail.com Date:2012-05-20 */ (function () { if (!window.KW) { window.KW = {} } //命名空间 window.KW = { ...
jQuery自定义弹出层效果实现详解
"jQuery实现的自定义弹出层效果实例详解" 在网页设计中，弹出层（也称为对话框或模态窗口）是一种常见的交互元素，用于展示重要的信息、警告、确认操作或者进行表单输入等。jQuery库提供了一种高效且灵活的方式来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值