zoukankan      html  css  js  c++  java
  • 加强的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'
    }
  • 相关阅读:
    2020.8.8第三十三天
    2020.8.7第三十二天
    2020.8.6第三十一天
    《大道至简》读后感
    2020.8.5第三十天
    2020.8.4第二十九天
    2020.8.3第二十八天
    2020.8.2第二十七天
    MySQL学习笔记(31):监控
    MySQL学习笔记(30):高可用架构
  • 原文地址:https://www.cnblogs.com/boolean/p/623675.html
Copyright © 2011-2022 走看看