H5 对话框简易封装

作者: _凌浩雨 | 来源:发表于2019-03-07 10:21 被阅读0次

1. 对话框

1). 设置 body填充整个屏幕

        * {
            margin: 0;
            padding: 0;
        }
        html, body{
            width: 100%;
            height: 100%;
        }

2). 设置body 中的内容

<body>
    <div style="background-color: aqua; height: 100%;">
        <div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
            <p style="height: 18.75rem;">mazaiting</p>
            <input style="height: 18.75rem;" type="text" value="11111111"/><br />
            <input style="height: 18.75rem;" type="text" value="11111111"/> 
            <button onclick="showDialog()"> 开启对话框</button>  
        </div>
    </div>
</body>

设置内层div为 flex 布局，并设置主轴方向为纵向，水平居中与垂直居中。

3). 添加对话框 div

<body>
    <div style="background-color: aqua; height: 100%;">
        <div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
            <p style="height: 18.75rem;">mazaiting</p>
            <input style="height: 18.75rem;" type="text" value="11111111"/><br />
            <input style="height: 18.75rem;" type="text" value="11111111"/> 
            <button onclick="showDialog()"> 开启对话框</button>  
        </div>
        <div id="dialog">
            <div>
                <div class='title'>标题</div>
                <div class="content">内容</div>
                <div>
                    <button class="cancelBtn" onclick="closeDialog()">取消</button>
                    <button class="okBtn" onclick="alert('mazaiting')">确定</button>
                </div>
            </div>
        </div>
    </div>
</body>

css代码

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        html, body{
            width: 100%;
            height: 100%;
        }
        
        #dialog {
            background-color: aliceblue; 
            height: 15rem; 
            width: 20rem;
            position: fixed;
            top: 40%;
            left: 30%;
            display: none;
        }
        
        #dialog > div {
            height: 100%; width: 100%; display: flex; 
            flex-direction: column; justify-content: space-around;align-items: center;
        }
    </style>

对话框使用 fixed来定位，使布局悬浮到整个 body上, left 和 top 定位，display设置 none 为不显示，设置 block 为显示。

js 代码

    <script type="text/javascript">
        function showDialog() {
            var dialog = document.getElementById('dialog');
            dialog.style.display = 'block';
        }
                
        function closeDialog() {
            var dialog = document.getElementById('dialog');
            dialog.style.display = 'none';
        }
    </script>

2. 抽取 css 文件和 js 文件

1). 先抽取 css 代码为 dialog.css文件

* {
    margin: 0;
    padding: 0;
}
html, body{
    width: 100%;
    height: 100%;
}

#dialog {
    background-color: aliceblue; 
    height: 15rem; 
    width: 20rem;
    position: fixed;
    top: 40%;
    left: 30%;
    display: none;
}

#dialog > div {
    height: 100%; width: 100%; display: flex; 
    flex-direction: column; justify-content: space-around;align-items: center;
}

2). 在 index.html文件中引用dialog.css文件

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    
    <link rel="stylesheet" type="text/css" href="css/dialog.css"/>
    
    <script type="text/javascript">
        function showDialog() {
            var dialog = document.getElementById('dialog');
            dialog.style.display = 'block';
        }
                
        function closeDialog() {
            var dialog = document.getElementById('dialog');
            dialog.style.display = 'none';
        }
    </script>
</head>

3). 抽取 javascript 代码为 dialog.js 文件

function showDialog() {
    var dialog = document.getElementById('dialog');
    dialog.style.display = 'block';
}
        
function closeDialog() {
    var dialog = document.getElementById('dialog');
    dialog.style.display = 'none';
}

4). 引用dialog.js文件

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    
    <link rel="stylesheet" type="text/css" href="css/dialog.css"/>
    <script type="text/javascript" src="js/dialog.js">
        
    </script>
</head>

5). 运行程序，检测是否正常运行

3. 封装使用

1). 修改 dialog.js文件

创建 dialog 对象，并设置属性及显示与隐藏方法

var objDialog = {
    dialog : document.getElementById('dialog'),
    title : document.querySelector('.title'),
    content : document.querySelector('.content'),
    cancelBtn: document.getElementsByClassName('cancelBtn')[0],
    okBtn: document.getElementsByClassName('okBtn')[0],
    
    showDialog: function(title,content,cancelTest,successTest,cancelFun,succeddFun){
        this.title.innerHTML = title;
        this.content.innerHTML = content;
        this.cancelBtn.innerHTML = cancelTest;
        this.okBtn.innerHTML = successTest;
        this.cancelBtn.onclick = cancelFun;
        this.okBtn.onclick = succeddFun;
        this.dialog.style.display = 'block';
    },
    closeDialog: function(){
        dialog.style.display = 'none';
    }
}

function showDialog() {
//  var dialog = document.getElementById('dialog');
//  dialog.style.display = 'block';
    objDialog.showDialog('测试标题', '测试内容', 'cancel', 'ok', function() {
        objDialog.closeDialog();
    }, function() {
        alert('确定');
    });
}

2). 修改 js 文件引用位置

<body>
    <div style="background-color: aqua; height: 100%;">
    </div>
    <script type="text/javascript" src="js/dialog.js">
</body>

3). 测试运行

4). 在 js 文件中动态添加对话框

首先修改html文件

<body>
    <div style="background-color: aqua; height: 100%;">
        <div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
            <p style="height: 18.75rem;">mazaiting</p>
            <input style="height: 18.75rem;" type="text" value="11111111"/><br />
            <input style="height: 18.75rem;" type="text" value="11111111"/> 
            <button onclick="showDialog()"> 开启对话框</button>  
        </div>
    </div>
    <script type="text/javascript" src="js/dialog.js">
</body>

修改js 文件

// var objDialog = {
//  dialog : document.getElementById('dialog'),
//  title : document.querySelector('.title'),
//  content : document.querySelector('.content'),
//  cancelBtn: document.getElementsByClassName('cancelBtn')[0],
//  okBtn: document.getElementsByClassName('okBtn')[0],
//  
//  showDialog: function(title,content,cancelTest,successTest,cancelFun,succeddFun){
//      this.title.innerHTML = title;
//      this.content.innerHTML = content;
//      this.cancelBtn.innerHTML = cancelTest;
//      this.okBtn.innerHTML = successTest;
//      this.cancelBtn.onclick = cancelFun;
//      this.okBtn.onclick = succeddFun;
//      this.dialog.style.display = 'block';
//  },
//  closeDialog: function(){
//      dialog.style.display = 'none';
//  }
// }

function showDialog() {
    dialog().showDialog('测试标题', '测试内容', 'cancel', 'ok', function() {
        dialog().closeDialog();
    }, function() {
        alert('确定');
    });
}
    
var AlertDialog = null;
function dialog(){
    if (AlertDialog){
        return AlertDialog;
    }
    let cancelBtn = document.createElement('button');
    cancelBtn.setAttribute('class', 'cancelBtn');
    let okBtn = document.createElement('button');
    okBtn.setAttribute('class', 'okBtn');
    let divBtn = document.createElement('div');
    divBtn.appendChild(cancelBtn);
    divBtn.appendChild(okBtn);
    let titleDiv = document.createElement('div');
    titleDiv.setAttribute('class', 'title');
    let contentDiv = document.createElement('div');
    contentDiv.setAttribute('class', 'content');
    let div = document.createElement('div');
    div.appendChild(titleDiv);
    div.appendChild(contentDiv);
    div.appendChild(divBtn);    
    let dialog = document.createElement('div');
    dialog.setAttribute('id', 'dialog');
    dialog.appendChild(div);
    document.body.appendChild(dialog);
    return AlertDialog = {
            dialog : document.getElementById('dialog'),
            title : document.querySelector('.title'),
            content : document.querySelector('.content'),
            cancelBtn: document.getElementsByClassName('cancelBtn')[0],
            okBtn: document.getElementsByClassName('okBtn')[0],
            
            showDialog: function(title,content,cancelTest,successTest,cancelFun,succeddFun){
                this.title.innerHTML = title;
                this.content.innerHTML = content;
                this.cancelBtn.innerHTML = cancelTest;
                this.okBtn.innerHTML = successTest;
                this.cancelBtn.onclick = cancelFun;
                this.okBtn.onclick = succeddFun;
                this.dialog.style.display = 'block';
            },
            closeDialog: function(){
                dialog.style.display = 'none';
            }
        };
}

H5 对话框简易封装

1. 对话框

1). 设置 body填充整个屏幕

2). 设置body 中的内容

3). 添加对话框 div

2. 抽取 css 文件和 js 文件

1). 先抽取 css 代码为 dialog.css文件

2). 在 index.html文件中引用dialog.css文件

3). 抽取 javascript 代码为 dialog.js 文件

4). 引用dialog.js文件

5). 运行程序，检测是否正常运行

3. 封装使用

1). 修改 dialog.js文件

2). 修改 js 文件引用位置

3). 测试运行

4). 在 js 文件中动态添加对话框

5). 测试运行

Material Design 色值

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读