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. ZOJ 3674 Search in the Wiki（字典树 + map + vector）

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4917 题意:每一个单词都一些tips单词. 先输入n个单词和他们的t ...

  2. 前端项目中常用es6知识总结 -- Promise逃脱回调地狱

    项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...

  3. 一个理性战胜感性的成功案例：P2P投资和活期理财，纠结中提炼出来的1个数学问题

    我经常是投资了P2P,然后用钱,因而损失了一部分收益. 这是一个让我纠结的问题,为了解决这个问题,我不再凭感觉,而是从现实情况,提炼出来1个数学题,解答我的疑惑. 这是一个理性战胜感性的成功案例~ P ...

  4. 微信小程序仿微信运动步数排行-交互

    效果图如下: 图片.png wxml: <view class="item-box"> <view class="items"> < ...

  5. DTU(用于将串口数据转换为IP数据或将IP数据转换为串口数据通过无线通信网络进行传送的无线终端设备)

    DTU (Data Transfer unit),是专门用于将串口数据转换为IP数据或将IP数据转换为串口数据通过无线通信网络进行传送的无线终端设备.DTU广泛应用于气象.水文水利.地质等行业.

  6. 【hdu 4333】Revolving Digits

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=4333 [题意] 就是给你一个数字,然后把最后一个数字放到最前面去,经过几次变换后又回到原数字,问在这些数 ...

  7. 【SSH高速进阶】——struts2简单的实例

    近期刚刚入门struts2.这里做一个简单的struts2实例来跟大家一起学习一下. 本例实现最简单的登陆,仅包括两个页面:login.jsp 用来输入username与password:succes ...

  8. @Import注解

    转自:https://blog.csdn.net/heyutao007/article/details/74994161 @Import注解就是之前xml配置中的import标签,可以用于依赖第三方包 ...

  9. Maven学习总结（18）——深入理解Maven仓库

    一.本地仓库(Local Repository) 本地仓库就是一个本机的目录,这个目录被用来存储我们项目的所有依赖(插件的jar包还有一些其他的文件),简单的说,当你build一个Maven项目的时候 ...

  10. 洛谷 P1691 有重复元素的排列问题

    P1691 有重复元素的排列问题 题目描述 设R={r1,r2,……,rn}是要进行排列的n个元素.其中元素r1,r2,……,rn可能相同.使设计一个算法,列出R的所有不同排列. 给定n以及待排列的n ...