javascript模仿msgbox提示效果代码


Posted in Javascript onJune 10, 2008
//前任作者:http://www.moozi.net 
//修改:hh13774978@126.com,rayking 
function $(str){ 
    return document.getElementById(str); 
} 
function _(str){ 
    return document.getElementsByTagName(str); 
} 
function msg(boxtitle,boxtype,boxwidth,msg,url){ 
    $("msg_div_main").style.width = boxwidth; 
    $("msg_div_main").style.left = (_("body")[0].clientWidth - boxwidth) / 2; 
    $("msg_div_main").style.top  = (_("body")[0].clientHeight - 220) / 2; 
    var msg_div_main_but_tmp = "<br /><br />" 
                + "<button class='msg_div_main_but' id='msg_div_main_but' " 
                + "onclick=\"msg_close_tmp_biyuan();" + url + "\">确 定</button>"; 
    switch(boxtype * 1){ 
        case 1: 
            $("msg_div_main_content").innerHTML = msg + msg_div_main_but_tmp; 
            //$("msg_div_main_but").focus(); 
        break; 
        case 2: 
            $("msg_div_main_content").innerHTML =  msg + msg_div_main_but_tmp 
                             + "  <button class='msg_div_main_but' " 
                             + "onclick='msg_close_tmp_biyuan();'>取 消</button>"; 
            //$("msg_div_main_but").focus(); 
        break; 
        case 3: 
            $("msg_div_main_content").innerHTML =  msg; 
        break; 
        defualt: 
            $("msg_div_main_content").innerHTML =  msg; 
        break; 
    } 
    $("msg_div_main_title").innerHTML =  boxtitle; 
    $("msg_div_main").style.zIndex = 200; 
    $("msg_div_main").style.display = ""; 
    if(document.all){    //IE 
            if(!$("msg_div_all_Iframe")) 
                { 
            document.body.appendChild(document.createElement("<iframe id='msg_div_all_Iframe' style='display:none;'></iframe>")); 
                } 
            $("msg_div_all").style.zIndex  = 100; 
            $("msg_div_all").style.display = ""; 
            $("msg_div_all").oncontextmenu = function() 
                { 
                        return false; 
                } 
            $("msg_div_all_Iframe").style.zIndex  = 99; 
            $("msg_div_all_Iframe").style.display = ""; 
            $("msg_div_all_Iframe").oncontextmenu = function() 
                { 
                        return false; 
                } 
        }else{ 
            $("msg_div_all").style.zIndex  = 100; 
            $("msg_div_all").style.display = ""; 
            $("msg_div_all").oncontextmenu = function() 
                { 
                        return false; 
                } 
        } 
    $("msg_div_main").oncontextmenu = function(){ 
        return false; 
    } 
} 
function msg_close_tmp_biyuan(){ 
    $('msg_div_all').style.display='none'; 
    $('msg_div_main').style.display='none'; 
    if(document.all){ 
    $('msg_div_all_Iframe').style.display='none';} 
} 
//加入对话框移动代码 
/* 鼠标拖动 */ 
var oDrag = ""; 
var ox,oy,nx,ny,dy,dx; 
function drag(e,o){ 
    var e = e ? e : event; 
    var mouseD = document.all ? 1 : 0; 
    if(e.button == mouseD) 
    { 
        if (o.parentNode) 
        { 
            oDrag = o.parentNode; 
        } 
        else{oDrag = o;} 
        ox = e.clientX; 
        oy = e.clientY;         
    } 
} 
function dragPro(e){ 
    if(oDrag != "") 
    {     
        //var obj=document.getElementById("msg");//拖动的id 
        var obj=oDrag;//拖动的id 
        var e = e ? e : event; 
        obj.style.position = 'absolute'; 
        dx = parseInt(obj.style.left); 
        dy = parseInt(obj.style.top); 
        if(isNaN(dx)){dx=0;} 
        if(isNaN(dy)){dy=0;} 
        nx = e.clientX; 
        ny = e.clientY; 
        obj.style.left = (dx + ( nx - ox )) + "px"; 
        obj.style.top = (dy + ( ny - oy )) + "px"; 
        ox = nx; 
        oy = ny; 
    } 
} 
document.onmouseup = function(){oDrag = "";} 
document.onmousemove = function(event){dragPro(event);} 
document.writeln("<style type='text/css'>" 
    + "#msg_div_all,#msg_div_all_Iframe{width:100%;height:100%;position:absolute;filter:Alpha(opacity=70);opacity:0.7;background:#EFEFEF;}" 
    + "#msg_div_main {position:absolute;}" 
    + "#msg_div_main_title {font-size:12px;color:#2C71AF;font-family:verdana;cursor:default;}" 
    + "#msg_div_main_content {font-size:14px;color:#2C71AF;padding-left:8px;}" 
    + ".msg_div_main_but {background:url(img/buttonbg.gif);width:65px;heigt:20px;border:none;padding-top:3px;font-size:12px;}" 
    + "</style>" 
    + "<div id='msg_div_all' style='display:none;'></div>" 
    +"" 
    + "<div id='msg_div_main' style='display:none;'>" 
    + "<table width='100%' height='29' border='0' cellspacing='0' cellpadding='0'  onmousedown='drag(event,this)'>" 
    + "<tr>" 
    + "<td width='25'><img src='img/bg_01.gif' width='25' height='29' alt='' /></td><td background='img/bg_02.gif' width='3'></td>" 
    + "<td background='img/bg_02.gif'  msg_forid='msg_div_main' id='msg_div_main_title'></td>" 
    + "<td background='img/bg_02.gif' align='right' style='padding-top:4px'>" 
    + "<img src='img/bg_05.gif' width='21' height='21' alt='关闭' " 
    + "onMouseover=\"this.src='img/bg_13.gif'\" " 
    + "onMouseout=\"this.src='img/bg_05.gif'\" onMouseup='msg_close_tmp_biyuan();' " 
    + "onMousedown=\"this.src='img/bg_18.gif'\"></td>" 
    + "<td width='6'><img src='img/bg_06.gif' width='6' height='29' alt='' /></td>" 
    + "</tr>" 
    + "</table>" 
    + "<table width='100%' border='0' cellspacing='0' cellpadding='0'>" 
    + "<tr>" 
    + "<td width='3' background='img/bg_07.gif'></td>" 
    + "<td bgcolor='#F7F7F7' align='center'><br /><span id='msg_div_main_content'></span><br /><br /></td>" 
    + "<td width='3' background='img/bg_08.gif'></td>" 
    + "</tr>" 
    + "<tr>" 
    + "<td width='3' height='3'><img src='img/bg_09.gif' width='3' height='3' alt='' /></td>" 
    + "<td background='img/bg_11.gif'></td>" 
    + "<td width='3' height='3'><img src='img/bg_10.gif' width='3' height='3' /></td>" 
    + "</tr>" 
    + "</table>" 
    + "</div>");

在线演示
打包下载
Javascript 相关文章推荐
js比较和逻辑运算符的介绍
Mar 10 Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
js实现倒计时关键代码
May 05 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
javascript 建设银行登陆键盘
Jun 10 #Javascript
js left,right,mid函数
Jun 10 #Javascript
国外的为初学者写的JavaScript教程
Jun 09 #Javascript
使用jscript实现二进制读写脚本代码
Jun 09 #Javascript
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 #Javascript
javascript 数组的方法集合
Jun 05 #Javascript
js程序中美元符号$是什么
Jun 05 #Javascript
You might like
PHP实现适用于自定义的验证码类
2016/06/15 PHP
Yii核心验证器api详解
2016/11/23 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
Safari5中alert的无限循环BUG
2011/04/07 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
python之PyMongo使用总结
2017/05/26 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
高山背包:High Sierra
2017/11/23 全球购物
自荐信模版
2013/10/24 职场文书
生物制药专业求职信
2014/03/11 职场文书
2015年元旦活动总结
2014/05/09 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
出纳岗位职责
2015/01/31 职场文书
荆州古城导游词
2015/02/06 职场文书
外出培训学习心得体会
2016/01/18 职场文书
mysql部分操作
2021/04/05 MySQL
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python