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 相关文章推荐
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
微信小程序canvas实现签名功能
Jan 19 Javascript
vue常用高阶函数及综合实例
Feb 25 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极大的增强功能和性能
2006/10/09 PHP
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
php生成RSS订阅的方法
2015/02/13 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
jquery easyui使用心得
2014/07/07 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
跟老齐学Python之再深点,更懂list
2014/09/20 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
django之常用命令详解
2016/06/30 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
python如何定义带参数的装饰器
2018/03/20 Python
python实现linux下抓包并存库功能
2018/07/18 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
python虚拟环境完美部署教程
2019/08/06 Python
Python datetime包函数简单介绍
2019/08/28 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
介绍下Lucene建立索引的过程
2016/03/02 面试题
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
仓库文员岗位职责
2014/04/06 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
大学迎新生欢迎词
2015/09/29 职场文书