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

一、总结

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

二、弹出层

弹出层

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>阶段练习01</title>

     <script src="jquery-3.1.1.min.js"></script>

     <style type="text/css">

         #box{

             width: 300px;

             height: 150px;

             display: none;

             border:solid green 1px;

         }

         #box h3{background: #ccc; margin-top: 2px;width: 300px;float: left;}

         #tit span{float: right;cursor: pointer;}

     </style>

 </head>

 <body>

     <input id="btn1" type="button" value="弹出层">

     <div id="box">

         <h3 id="tit">标题行<span id="close">关闭</span></h3>

         <p>内容略：.......</p>

     </div>

 <script>

     $(function(){

         $('#btn1').click(function(){

             $('#box').css('display','block')

         })

         $('#close').click(function(){

             $('#box').css('display','none')

         })

     })

 </script>

 </body>

 </html>
 

js进阶 11-20 弹出层如何制作的更多相关文章

  1. Js实例——模态框弹出层

    1.描述 百度登录就是一个模态框弹出层.思路分析:先将灰色大背景和登陆盒子设为不可见,利用JS将其动态加载可见. 2.代码 <!DOCTYPE html> <html> < ...

  2. 原生Js弹窗插件|web弹出层组件|对话框

    wcPop.js 是一款基于原生javascript开发的前端 web版 弹窗组件,遵循原生 H5/css3/JS 的书写规范,简单实用.拿来即用(压缩后仅10KB).已经兼容各大主流浏览器.内含多种 ...

  3. js,ajax,layer笔记(弹出层,在弹出一个弹框)

    整体认识: 因为作用域的问题,js 在页面初次加载时已近加载好了,所以要有第二次弹窗的效果,必须得在第一次成功之后再次让他加载js 代码: /*shaun*/showdetailsPag: funct ...

  4. js 点击 隐藏弹出层

    document.onmousedown = function(e){ var ev = document.all ? window.event : e; var _con = $("#ci ...

  5. LayUI之弹出层

    1.导入插件 layui使用需要导入layui的js和css: <link rel="stylesheet" href="layui/css/layui.css&q ...

  6. div滚动条弹出层效果 （所需要的css文件和js文件，都已经上传到文件里面了progressbar.rar）

    <%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...

  7. 简单 JS 弹出层 背景变暗

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js插件---弹出层sweetalert2（总结）

    js插件---弹出层sweetalert2(总结) 一.总结 一句话总结: sweetalert2的效果非常好,效果比较Q萌,移动端适配也比较好,感觉比layer.js效果好点 1.SweetAler ...

  9. 【JS新手教程】弹出两层div，及在LODOP内嵌上层

    前面的博文有个简单的弹出div层[JS新手教程]浏览器弹出div层1,有一层,不过为了提示,一般会不让用户可以点击该提示之外的地方的.如果让用户弹出层后,把其他的按钮和链接都设置不可用应该比较麻烦,如 ...

随机推荐

  1. Linux(centos)下mysql编译安装教程

    Linux下mysql编译安装教程 #查看linux发行版本 cat /etc/issue #查看linux内核版本号 uname -r 本文測试环境centOS6.6 一.Linux下编译安装MyS ...

  2. spring jdbcTemplate使用queryForList示例

    查询代码: LogVo 日志要显示的内容(Log的部分或者全部列) Log是日志完整的实体 public List<LogVO> findLogByDate(String startDat ...

  3. 洛谷 P3386 【模板】二分图匹配 Dinic版

    题目背景 二分图 题目描述 给定一个二分图,结点个数分别为n,m,边数为e,求二分图最大匹配数 输入输出格式 输入格式: 第一行,n,m,e 第二至e+1行,每行两个正整数u,v,表示u,v有一条连边 ...

  4. jQuery自定义插件规范

    <ul class="list"> <li>导航列表 <ul class="nav"> <li>导航列表1< ...

  5. golang beego cache

    package main import ( "fmt" "github.com/astaxie/beego/cache" "time" ) ...

  6. vue踩坑记-在项目中安装依赖模块npm install报错

    在维护别人的项目的时候,在项目文件夹中安装npm install模块的时候,报错如下: npm ERR! path D:\ShopApp\node_modules\fsevents\node_modu ...

  7. 洛谷 P2616 [USACO10JAN]购买饲料II Buying Feed, II

    洛谷 P2616 [USACO10JAN]购买饲料II Buying Feed, II https://www.luogu.org/problemnew/show/P2616 题目描述 Farmer ...

  8. C# Aspect-Oriented Programming(AOP) 利用多种模式实现动态代理

    什么是AOP(Aspect-Oriented Programming)? AOP允许开发者动态地修改静态的OO模型,构造出一个能够不断增长以满足新增需求的系统,就象现实世界中的对象会在其生命周期中不断 ...

  9. [React] Render Text Only Components in React 16

    In this session we create a comment component to explore how to create components that only render t ...

  10. js进阶 14-9 ajax事件有哪些

    js进阶 14-9 ajax事件有哪些 一.总结 一句话总结:ajax开始时事件.发送时事件,请求完成时事件,请求成功时事件,请求结束时事件,请求错误时事件事件. 1.ajax事件的监听对象是谁? 都 ...