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. CList 点击表头排序 （1）SortItems函数

    点击表头排序整体的思路都是去 CListCtrl类中的方法SortItems去实现 CListCtrl::SortItems的原型是: BOOL SortItems( PFNLVCOMPARE pfn ...

  2. mycat基本概念及读写分离一

    mycat基本概念及读写分离一 目录(?)[+] 安装与启动 mycat目录介绍 mycat三个最重要配置文件 验证读写分离 安装与启动 linux下可以下载Mycat-server-xxxxx.li ...

  3. restcontroller和controller区别

    http://www.cnblogs.com/softidea/p/5884772.html#undefined http://blog.csdn.net/blueheart20/article/de ...

  4. ToggleButton控件

    ToggleButton 两种状态 ·状态button     -继承自CompoundButton ·主要属性:-Android:textOn    -Android:textOff ·主要方法: ...

  5. 5lession-path路径相关操作

    今天开始接触到了文件目录.路径方面的知识点.记录如下 先看代码 #!/usr/bin/python # -*- coding: utf-8 -*- import os import sys curre ...

  6. Sending e-mail with Spring MVC--转载

    原文地址:http://www.codejava.net/frameworks/spring/sending-e-mail-with-spring-mvc Table of contents: 1.S ...

  7. 学习笔记：TypeScript入门——基础类型

    前言: TypeScript官网断断续续看过几遍,不知道项目中如何使用,有机会还是要实践一下.现在再把文档上不懂的知识点理一遍. 基础类型 1.什么是元组Tuple? 元组类型允许表示一个已知元素数量 ...

  8. Day2：列表、元组

    一.列表 1.定义与访问元素(按索引) #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan list_a = [&quo ...

  9. 资源下载https://msdn.itellyou.cn/

    资源下载https://msdn.itellyou.cn/  迅雷

  10. java中的switch用String作为条件

    在开发java程序的过程中,我们遇到了条件推断首选就是switch,可是java中的switch功能不支持字符串作为条件.这时我们该怎么办呢? --使用枚举. 一.枚举简单了解    1.enum是一 ...