zoukankan      html  css  js  c++  java
  • JS模态对话框

    • 模态框1

    思路

    1.界面点击按钮
    2.遮罩层
    3.带确定按钮等的一个小页面

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta charset="utf-8">
            <style type="text/css">
                .content {
                    height: 1080px;
                    background-color: pink;
                }
    
                .shade {
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: gray;
                    opacity: 0.5;
                }
    
                .model {
                    width: 200px;
                    height: 200px;
                    background-color: bisque;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-top: -100px;
                    margin-left: -100px;
                }
    
                .hide {
                    display: none;
                }
            </style>
    
        </head>
        <body>
            <div class="content">
                <button onclick="func()">show</button>
                <!-- 界面点击按钮 -->
                hello world
            </div>
            <!-- 遮罩层 -->
            <div class="shade hide"></div>
            <!-- 带确定按钮等的一个小页面 -->
            <div class="model hide">
                <button onclick="cancel()">show</button>
            </div>
    
            <script type="text/javascript">
                function func(argument) {
                    // 界面按钮点击时取消隐藏的元素(显示小页面和遮罩层)
                    var ele_shade = document.getElementsByClassName('shade')[0]
                    ele_model.classList.remove("hide")
                    var ele_model = document.getElementsByClassName('model')[0]
                    ele_shade.classList.remove("hide")
                }
    
                function cancel() {
                    // 点击小页面按钮时隐藏小页面和遮罩层
                    var ele_shade = document.getElementsByClassName("shade")[0]
                    var ele_model = document.getElementsByClassName("model")[0]
                    ele_model.classList.add("hide")
                    ele_shade.classList.add("hide")
                }
            </script>
        </body>
    </html>

    模态框2

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style>
                .c1{
               position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #0f0f0f;
                opacity: 0.5;
                z-index: 9;
            }
            .c2{
                width: 500px;
                height: 400px;
                background-color: #f9f9f9;
                position: fixed;
                left: 50%;
                top: 50%;
                margin-top: -200px;
                margin-left: -250px;
                z-index: 10;
    
            }
            .hide{
                display: none;
            }
        </style>
        </head>
        <body style="margin: 0;">
            <div>
                <input type="button" value="添加" onclick="ShowMod();">
            </div>
            <!--遮罩层开始-->
            <div id='id1' class="c1 hide">
    
            </div>
            <!--遮罩层结束-->
            <!--弹出框开始-->
    
            <div id='id2' class="c2 hide">
                <p class="=c3"><input type="text" placeholder="username"></p>
                <p><input type="password" placeholder="password"></p>
                <p><input type="button" value="取消" onclick="HideMod();">
                    <input type="button" value="确定"></p>
    
            </div>
            <!--弹出框结束-->
            <script>
                function ShowMod() {
                    document.getElementById('id1').classList.remove('hide');
                    document.getElementById('id2').classList.remove('hide');
    
                }
    
                function HideMod() {
                    document.getElementById('id1').classList.add('hide');
                    document.getElementById('id2').classList.add('hide');
    
                }
            </script>
        </body>
    </html>

    模态框3

    • 思路:
    1. 小页面放在遮罩层里面
    2. CSS属性控制有和无
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>mt</title>
            <style type="text/css">
                /* 定义模态对话框外面的覆盖层样式 */
                #modal-overlay {
                    display: none;
                    position: absolute;
                    /* 使用绝对定位或固定定位  */
                    left: 0px;
                    top: 0px;
                    width: 100%;
                    height: 100%;
                    z-index: 1000;
                    background-color: #333;
                    opacity: 0.5;
                    /* 背景半透明 */
                }
    
                /* 模态框样式 */
                .modal-data {
                    width: 300px;
                    margin: 100px auto;
                    background-color: #fff;
                    border: 1px solid #000;
                    padding: 15px;
                    text-align: center;/* 文本对其方式 */
                }
            </style>
        </head>
        <body>
            <input type="button" name="" id="" value="淡出模态框" onclick="overlay()" />
            <div id="modal-overlay">
                <div class="modal-data">
                    <p>一个很简单的模态对话框 </p>
                    <p>点击<a onclick="overlay()" href="">这里</a>关闭</p>
                </div>
            </div>
            <script type="text/javascript">
                function overlay() {
                    var e1 = document.getElementById('modal-overlay');
                    e1.style.display = (e1.style.display == "block") ? "none" : "block";
                }
            </script>
        </body>
    </html>

    何所为,不仅仅是一种态度,更是一种艺术!
  • 相关阅读:
    响应式开发
    css3的2D和3D的转换
    前端CSS3笔记
    DOM精简版笔记
    JS进阶
    linux 修改时间同步到BIOS
    linux-设置代理和取消代理
    linux-rpm强制安装跳过依赖包
    [linux] VNC the connection was refused by the computer
    Linux vim 常用命令(不定时update)
  • 原文地址:https://www.cnblogs.com/tanzizheng/p/12844955.html
Copyright © 2011-2022 走看看