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>
 

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. c# 查询sql 返回多个參数

    1.依据须要查询mysql 语句,返回三个须要的參数,不是数据集 2.编写函数例如以下: public static void GetParas(string 条件1, out string 返回值1 ...

  2. 程序猿果真有前端后端client吗

    前端 后端 client DBA OP 程序猿有分这么细的吗? 入行时候有区别. 殊途同归 吾道一以贯之, 假设作为程序猿不能领悟一贯, 则永远不清楚.

  3. xampp 在 centos 中无法启动的解决办法

    修改这个文件 vim /opt/lampp/lampp 找到     if egrep "9 " /etc/redhat-release > /dev/null更改为  if ...

  4. vim-录制命令的使用

    使用vim时无意间触碰到q键,左下角出现“recording”这个标识,这是vim的一个强大功能. 他可以录 制一个宏(Macro),在开始记录后,会记录你所有的键盘输入,包括在insert模式下的输 ...

  5. 65.十一级指针实现百万qq号的增删查改以及排序写入

    运行结果: 内存使用情况: 写入文件排序好的数据: 创建文件地址以及创建十一级指针 char *path = "QQ.txt"; char *sortpath = "QQ ...

  6. InstallShield详细制作说明(三)

    八.许可协议 打开[Installation Designer]->[Behavior and Logic]->[Support Files/Billboards]面板 这里[Langua ...

  7. buildroot使用

    buildroot是一套自动化构建工具,比yocto简单. 项目地址:http://www.buildroot.org/ 培训资料地址:http://free-electrons.com/ 附带lin ...

  8. Vue神之大坑处理：获取通过URL的的参数不可直接操作

    比如: $router.query['isZero'] == 'false';  //不会生效,刷新页面又好使了.打印处理是蓝色的false,再次刷新字体就变浅黑了. 解决:($router.quer ...

  9. 关于MyBatis sqlSession的一点整理

    工作中,需要学习一下MyBatis sqlSession的产生过程,翻看了mybatis-spring的源码,阅读了一些mybatis的相关doc,对mybatis sqlSession有了一些认知和 ...

  10. meld文件的脚本

    今天模仿着别人的脚本,结合网上的资料,摸索着写了一个简单的脚本,用来打开meld 工具.这个脚本虽然简单,但这是第一次自己写脚本,记录下来,作为自己python学习的起点.代码如下 #/use/bin ...