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 获取LI里的内容
Dec 17 Javascript
firefo xml 读写实现js代码
Jun 11 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
原生js实现简单轮播图
Oct 26 Javascript
vue完美实现el-table列宽自适应
May 08 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
php 从数据库提取二进制图片的处理代码
2009/09/09 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
python实现泊松图像融合
2018/07/26 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
环境科学专业个人求职信
2013/09/26 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android