专栏首页布尔加强的alert confirm js自定义对话框 多个按钮 ICO自定义

加强的alert confirm js自定义对话框 多个按钮 ICO自定义

效果图:

<html>
<head>
    <title>对话框</title>
    <link rel="stylesheet" type="text/css" href="/modules/commons/css/dialog.css">
    <script src="/modules/commons/js/prototype.js"></script>
    <script src="/modules/commons/js/dialog.js"></script>
</head>
<body>
    <div id="Contain">
        <div id="ICO" style="position:absolute; left:0px; top:5px;"></div>
        <div id="Message"></div>
        <div id="Buttons"></div>
    </div>
</body>
<script>
Event.observe(window, 'load', function(){
    //check base config and parameter
    var objIn = window.dialogArguments
    var arrBt =  ['确定:1', '取消:0']
    if(objIn){
        if(objIn.ArrBt){
            arrBt = objIn.ArrBt
        }
        if(objIn.Message){
            $('Message').innerHTML = objIn.Message
        }
    }else{
        alert('tell me what u want to let user to confirm or alert information')
        return
    }
    
    //ico
    var ICO = $('ICO')
    var img = document.createElement('img')
    if(objIn.ICO){
        img.src = objIn.ICO
    }else{
        img.src = Dialog.Alert
    }
    ICO.appendChild(img)
    
    //button
    var Buttons = $('Buttons')
    arrBt.each(function(bt){
        var input = document.createElement('input')
        input.type = 'button'
        var arr = bt.split(':')
        input.value = arr[0]
        input.returnValue = arr[1]
        input.onclick = ClickBt
        Buttons.appendChild(input)
    })
}, false)
function ClickBt(){
    window.returnValue = this.returnValue
    window.close()
}
</script>
</html>

调用方法的封装

/*
    2007-01-18 lisq custom dialog
    use age:
    <script src="/modules/commons/js/dialog.js"></script>
    var objIn = {
        Message : 'your message',
        ArrBt : ['保存:1', '不保存:2', '取消:3']
    }
    var objOut = Dialog.Show(objIn)
    if(objOut == 1){
        save it
    }else if(objOut == 2){
        not save it
    }else if(objOut == 3){
        u click cancle
    }
*/
var Dialog = {
    Show : function(objIn){
        var url = '/Commons/Dialog.do'
        var style = 'dialogHeight:110px; dialogWidth:250px; edge:Raised; scroll:no; center:Yes; help:No; resizable:no; status:no;'
        return window.showModalDialog(url, objIn, style)
    },
    Alert : '/modules/commons/images/alert.png',
    Confirm : '/modules/commons/images/confirm.png',
    Error : '/modules/commons/images/error.gif.png'
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js checkbox.checked=true在document.body.appendChild(checkbox)前与后赋值

    如果想改变元素的视觉效果(checkbox.checked=true会打钩),请在把元素添加到页面上再为其赋值,否则赋值无效。 看这段代码,18行与21行,如果...

    用户1183026
  • 将单机版短信猫变成网络版

    最近做一个网站项目,用户买了一个金笛的短信猫(USB接口版本),他想把短信功能加到网站上来。以前没有做过短信功能,感觉有点好奇想做,于是开始查短信的资料。刚好有...

    用户1183026
  • js用于树型结构级联选择 支持三态级联选择

    <html> <head> <meta http-equiv="Content-Type" content="text/html; chars...

    用户1183026
  • 早报:东南亚互联网经济规模今年将达500亿美元

    1、谷歌:东南亚互联网经济规模今年将达500亿美元 新浪美股讯 北京时间12月12日午间CNBC消息,谷歌(1041.1, 4.05, 0.39%)和新加坡主...

    用户1335017
  • ol仿百度拖拽调整圆的大小的实现

    用过的百度地图的人都非常喜欢百度地图里面的周边搜索功能,它能够通过拖拽查询范围的大小,甚是好用。在本文,仿百度实现类似的效果。

    lzugis
  • Flash/Flex学习笔记(39):弹性运动

    动画中的弹性运动 从视觉效果上接近 物理经典力学中的单摆运动或弹簧(胡克定律F=Kx)振动 先看下面的模拟演示: 规律: 小球先从出发点(初始为最左侧)向目标点...

    菩提树下的杨过
  • 【Java学习笔记之三十】详解Java单例(Singleton)模式

    概念: Java中单例模式是一种常见的设计模式,单例模式的写法有好几种,这里主要介绍三种:懒汉式单例、饿汉式单例、登记式单例。   单例模式有以下特点: 1...

    Angel_Kitty
  • 用.NET Core构建安全的容器化的微服务

    微服务热潮正在如火如荼地进行,也有着充分的理由。它不是每个问题的银弹,但它无疑成为企业软件系统中可扩展性和弹性的实用解决方案。

    ★忆先★
  • 04-老马jQuery教程-DOM节点操作及位置和大小

    1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签。创建标签后,...

    老马
  • 【CVPR 2018】牛津大学等联合提出通过让神经网络学会比较实现少样本学习

    【论文导读】 深度学习的爆炸式发展得益于海量数据+强大计算力+算法三个部分的巨大进展,我们通常需要大量的数据去驱动模型的训练,使其获得很好的效果。但是在很多领...

    张俊怡

扫码关注云+社区

领取腾讯云代金券