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 相关文章推荐
jquery URL参数判断,确定菜单样式
May 31 Javascript
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
vue实现简单全选和反选功能
Sep 15 Javascript
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
15种PHP Encoder的比较
2007/04/17 PHP
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
Javascript MD4
2006/12/20 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
动态添加js事件实现代码
2009/03/12 Javascript
javascript写的一个链表实现代码
2009/10/25 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
python获取地震信息 微信实时推送
2019/06/18 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
Python3运算符常见用法分析
2020/02/14 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
优秀员工年终发言演讲稿
2014/01/01 职场文书
校园文化建设方案
2014/02/03 职场文书
简历上的自我评价
2014/02/03 职场文书
校园绿化美化方案
2014/06/08 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
杜甫草堂导游词
2015/02/03 职场文书