自定义 Dialog

最新推荐文章于 2024-03-19 20:29:28 发布

何时_枫叶红

最新推荐文章于 2024-03-19 20:29:28 发布

阅读量259

点赞数

分类专栏： JavaScript 文章标签： JavaScript Bootstrap Dialog

本文链接：https://blog.csdn.net/yuchen352416/article/details/51035381

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>Dialog Demo</title>
        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/dialog.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"/>
        <link rel="stylesheet" type="text/css" href="css/dialog.css"/>
    </head>

    <body>
        <div id="mask"></div>
    </body>

    <script type="text/javascript">

        // 创建对话框
        var dialog = new Dialog();
        dialog.createDialog();

        // 设置对话框标题
        dialog.setTitle("提示");

        // 设置对话框消息
        dialog.setMessage("是否删除该图片?");

        // 创建需要显示的按钮
        var list = new Array();
        var save = document.createElement("input");
        save.type = "button";
        save.setAttribute("class","btn");
        save.value = " 保 存 ";
        save.onclick = function() {
            dialog.hideDialog();
        }
        list[list.length] = save;

        // 设置对话框按钮
        dialog.setButtons(list);

        // 显示对话框
        dialog.showDialog();

    </script>

</html>

JavaScript

function Dialog() {

    /**
     * 创建对话框
     * 
     */
    this.createDialog = function() {
        var mask = document.getElementById("mask");
        var dialog = document.createElement("div");
        var title = document.createElement("div");
        var body = document.createElement("div");
        var foot = document.createElement("div");

        dialog.id = "dialog";
        title.id = "dialog-title";
        body.id = "dialog-body";
        foot.id = "dialog-foot";

        dialog.appendChild(title);
        dialog.appendChild(body);
        dialog.appendChild(foot);
        mask.appendChild(dialog);
    }

    /**
     * 显示对话框
     */
    this.showDialog = function() {
        $('#mask').fadeIn("fast", function(){
            $('#dialog').slideDown("fast");
        });
    }

    /**
     * 隐藏对话框
     */
    this.hideDialog = function() {
        $('#dialog').slideUp("fast",function(){
            $('#mask').fadeOut("fast");
        });
    }

    /**
     * 设置标题显示内容
     */
    this.setTitle = function(title) {
        $('#dialog-title').html(title);
    }

    /**
     * 设置消息显示内容
     */
    this.setMessage = function(message) {
        $('#dialog-body').html(message);
    }

    /**
     * 添加按钮 
     * 默认会有一个关闭按钮
     * 
     * @param {Object} objs
     */
    this.setButtons = function(objs) {
        var button = document.createElement("input");
        button.type = "button";
        button.setAttribute("class","btn");
        button.value = " 确 认 ";
        button.onclick = function() {
            $('#dialog').slideUp("fast",function(){
                $('#mask').fadeOut("fast");
            });
        }
        if(undefined!=objs && null!=objs && objs.length>0) {
            for (var i=0; i<objs.length; i++) {
                $('#dialog-foot').append(objs[i]);
            }
            button.value = " 关 闭 ";
        }
        $('#dialog-foot').append(button);
    }



}

CSS

*{
    margin: 0px;
    padding: 0px;
}

#mask {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 9997;
    -moz-opacity: 0.7;
    opacity: .70;
    filter: alpha(opacity=70);
}

#dialog {
    display: none;
    position: relative;
    top: 23px;
    width: 53%;
    min-height: 150px;
    border: 3px solid #CCCCCC;
    background-color: white;
    z-index: 9998;
    overflow: auto;
    /* 水平居中 */
    margin-left: auto;
    margin-right: auto;
    /*修改对话框的字体*/
    font-family: "微软雅黑";
}

#dialog-title {
    position: absolute;
    height: 35px;
    width: 100%;
    top: 0px;
    left: 0px;
    font-size: 30px;
    font-weight: normal;
    background-color: #CCCCCC;
    padding-top: 7px;
}

#dialog-foot {
    background-color: #CCCCCC;
    position: absolute;
    height: 32px;
    width: 100%;
    bottom: 0px;
    right: 0px;
    padding-top: 3px;
    text-align: right;
}

#dialog-body {
    font-size: 15px;
    padding-top: 60px;
    padding-left: 23px;
    padding-bottom: 30px;
}

#dialog-foot .btn {
    margin-right: 10px;
}