原生js创建模态框

plokmju88 发布于2019-04-23 13:42 / 3108人阅读

摘要：效果图如下代码如下遮盖层主页面模态框

1.效果图如下：

2.代码如下：

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Testtitle>
<style>
    #pageMask {
        visibility: hidden;    
        position: absolute;
        left: 0px;    
        top: 0px;
        width:100%;
        height:100%;
        text-align: center;
        z-index: 1100;
        background-color: #333; 
        opacity: 0.6;
    }
    #ModalBody{
        background: white;
        width: 50% !important;
        height: 50% !important;
        position:absolute;
        left: 25%;
        top: 25%;
        z-index: 1101;
        border: 1px solid;
        display: none;
    }
    #closeModalBtn{
        position: static;
        margin-top: 5px;
      margin-right: 1%;
      float: right;
        font-size: 14px;
        background: #ccc0;
        cursor: pointer;
    }
style>
head>
<body>
    <div class="content">
        <h1>Test Modalh1>
        <div id="pageMask">div>     
        <button class="showModalBtn" id="showModalBtn">Btnbutton>
        <div>    
            Page Content...
        div>
    div>
    
    <div id="ModalBody">    
        <button id="closeModalBtn" style="display: none;">Closebutton>
        <div>Test Modal Body...div>
    div>
    
    <script>
        window.onload = function(){
            expandIframe();
        }
        function expandIframe(){
            var mask = document.getElementById("pageMask");
            var modal = document.getElementById("ModalBody");
            var closeBtn = document.getElementById("closeModalBtn");
                    var btn = document.getElementById("showModalBtn");
            
            btn.onclick = function(){
                modal.style.display = (modal.style.display == "block")? "none" : "block";
                closeBtn.style.display = (closeBtn.style.display == "block")? "none" : "block";
              mask.style.visibility = (mask.style.visibility == "visible")? "hidden" : "visible";
            }
            
            closeBtn.onclick = function(){
                modal.style.display = (modal.style.display == "block")? "none" : "block";
                closeBtn.style.display = (closeBtn.style.display == "block")? "none" : "block";
                mask.style.visibility = (mask.style.visibility == "visible")? "hidden" : "visible";
            }
        }
    script>
body>
html>

云服务器 GPU云服务器如何用js实现模态框 js 向模态框写内容 js 创建一个文本框 H5注册模态框

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2239.html

如何在angular.js中优雅的使用ui.bootstrap的modal组件

摘要：提供唯一的方法配置。即文件名，在同一个页面有多个不同业务的模态框的情况下很方便点击确认按钮执行的代码可以从中获取和字段进一步操作发起请求等点击取消按钮执行的代码 ui.bootstrap的modal组件可以很方便地实现页面controller与模态框controller之间通信，特别是弹出的模态框中有比较复杂的表格信息需要用户填写，下面切入主题：注册全局模态框实例的controlle...

Jrain 2019-08-22 11:16 评论0 收藏0
原生模态框,遮罩层

摘要：哈哈哈哈中信营业厅高尧三汉中门分店会员有效期取消确定哈哈哈哈中信营业厅高尧三汉中门分店会员有效期取消确定DOCTYPE html> Document body { background-color: #000000; } ul, li { list-style: none; padding: 0; margin: 0; } .div1 { position: fixed; lef...

cloud 2019-04-23 11:40 评论0 收藏0
用vue实现模态框组件

摘要：组件结构头部内容区域尾部操作按钮模态框结构分为三部分，分别为头部内部区域和操作区域，都提供了，可以根据需要定制。调用点击确定按钮的回调处理点击取消按钮的回调处理用创建一个索引就很方便拿到模态框组件内部的方法了。基本上每个项目都需要用到模态框组件，由于在最近的项目中，alert组件和confirm是两套完全不一样的设计，所以我将他们分成了两个组件，本文主要讨论的是confirm组件的实...

mrcode 2019-08-21 14:28 评论0 收藏0