zoukankan      html  css  js  c++  java
  • js进阶 11-20 弹出层如何制作

    js进阶 11-20 弹出层如何制作

    一、总结

    一句话总结:其实就是一个div,控制显示和隐藏即可。设置成绝对定位更好,就可以控制弹出层出现的位置。关闭的画质需要将display重新设置为none就好。

    二、弹出层

    弹出层

    案例描述:点击按钮之后自动弹出一个内容页面,点击内容页面上的关闭按钮后,页面关闭

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>阶段练习01</title>
     6     <script src="jquery-3.1.1.min.js"></script>
     7     <style type="text/css">
     8         #box{
     9             width: 300px;
    10             height: 150px;
    11             display: none;
    12             border:solid green 1px;
    13         }
    14         #box h3{background: #ccc; margin-top: 2px;width: 300px;float: left;}
    15         #tit span{float: right;cursor: pointer;}
    16     </style>
    17 </head>
    18 <body>
    19     <input id="btn1" type="button" value="弹出层">
    20     <div id="box">
    21         <h3 id="tit">标题行<span id="close">关闭</span></h3>
    22         <p>内容略:.......</p>
    23     </div>
    24 <script>
    25     $(function(){
    26         $('#btn1').click(function(){
    27             $('#box').css('display','block')
    28         })
    29         $('#close').click(function(){
    30             $('#box').css('display','none')
    31         })
    32     })
    33 </script>
    34 </body>
    35 </html>
     
  • 相关阅读:
    SharePoint Development
    win32- copyfile的使用
    SetWindowHookEx的复习
    C++ vector的使用
    关于char * 和 char [] 的一点理解
    CreateThread
    C++字符串大写字母转小写字母
    字符串逆序
    使用RegSetValueEx创建键值
    EnumColorProfiles WcsGetDefaultColorProfile WcsSetDefaultColorProfile的使用
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9242969.html
Copyright © 2011-2022 走看看