zoukankan      html  css  js  c++  java
  • 背景变暗弹出对话框的html/js代码

    Check it:

    <html>
        
    <head>
            
    <title>EXAMPLE</title>
            
    <style>
            .overlay
    {
                display
    : none;
                position
    : absolute;
                top
    : 0%;
                left
    : 0%; 
                width
    : 100%; 
                height
    : 100%; 
                background-color
    : gray; 
                z-index
    :1001; 
                -moz-opacity
    : 0.8; 
                opacity
    :.80; 
                filter
    : alpha(opacity=50); 
            
    } 
            .content 
    {
                display
    : none;
                position
    : absolute;
                top
    : 25%; 
                left
    : 25%; 
                width
    : 50%; 
                height
    : 50%; 
                padding
    : 16px; 
                border
    : 16px solid blue; 
                background-color
    : white; 
                z-index
    :1002; 
                overflow
    : auto; 
            
    } 
            
    </style>
        
    </head>
        
    <body>
            
    <p>灰化背景
            
    <href="javascript:void(0)" onclick="document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'">点击</a>打开窗口
            
    </p>
            
            
    <div id="light" class="content">
            弹出窗口的内容写在这里。点击
    <href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">X</a>这里关闭窗口
            
    </div>
            
    <div id="fade" class="overlay"></div>
        
    </body>
    </html>
  • 相关阅读:
    c++求最大公约数、最小公倍数
    五个简单的shell脚本
    微信小程序slot(一)
    小程序详解子传父
    小程序封装组件详解父传子
    小程序生命周期详解
    小程序之confirm-type改变键盘右下角的内容和input按钮详解
    小程序之按钮你不知道的v2
    小程序image图片缩小不变形
    小程序之navigator跳转方式
  • 原文地址:https://www.cnblogs.com/super119/p/2180458.html
Copyright © 2011-2022 走看看