js进阶 11-20 弹出层如何制作
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 弹出层如何制作的更多相关文章
- Js实例——模态框弹出层
1.描述 百度登录就是一个模态框弹出层.思路分析:先将灰色大背景和登陆盒子设为不可见,利用JS将其动态加载可见. 2.代码 <!DOCTYPE html> <html> < ...
- 原生Js弹窗插件|web弹出层组件|对话框
wcPop.js 是一款基于原生javascript开发的前端 web版 弹窗组件,遵循原生 H5/css3/JS 的书写规范,简单实用.拿来即用(压缩后仅10KB).已经兼容各大主流浏览器.内含多种 ...
- js,ajax,layer笔记(弹出层,在弹出一个弹框)
整体认识: 因为作用域的问题,js 在页面初次加载时已近加载好了,所以要有第二次弹窗的效果,必须得在第一次成功之后再次让他加载js 代码: /*shaun*/showdetailsPag: funct ...
- js 点击 隐藏弹出层
document.onmousedown = function(e){ var ev = document.all ? window.event : e; var _con = $("#ci ...
- LayUI之弹出层
1.导入插件 layui使用需要导入layui的js和css: <link rel="stylesheet" href="layui/css/layui.css&q ...
- div滚动条弹出层效果 (所需要的css文件和js文件,都已经上传到文件里面了progressbar.rar)
<%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...
- 简单 JS 弹出层 背景变暗
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js插件---弹出层sweetalert2(总结)
js插件---弹出层sweetalert2(总结) 一.总结 一句话总结: sweetalert2的效果非常好,效果比较Q萌,移动端适配也比较好,感觉比layer.js效果好点 1.SweetAler ...
- 【JS新手教程】弹出两层div,及在LODOP内嵌上层
前面的博文有个简单的弹出div层[JS新手教程]浏览器弹出div层1,有一层,不过为了提示,一般会不让用户可以点击该提示之外的地方的.如果让用户弹出层后,把其他的按钮和链接都设置不可用应该比较麻烦,如 ...
随机推荐
- git 工具的使用总结(5)-查看历史记录
1.查看历史记录git log 1)不加参数,显示的就是节点号,作者,日期,注释 commit b7b310d220628530d1feb9e8046ccb59039d59f2 Author: zha ...
- List-ArrayList 使用
今天优化一段代码,如下 int num = 0; boolean skipAppend = false; int types_ext1[] = new int[] { ModuleType.TYPE_ ...
- JXNU 新生选拔赛
1001 最小的数 Problem Description 定义一种正整数集合K,集合中有N个数,集合中元素Ki(1<=i<=N)是包含i个不同质因子的最小的数.因为Ki可能会很大,所以将 ...
- php学习笔记4
PHP数据类型: String(字符串), Integer(整型), Float(浮点型), Boolean(布尔型), Array(数组), Object(对象), NULL(空值). 说明:var ...
- php学习笔记3
1.PHP 定界符 EOF 的作用就是按照原样,包括换行格式什么的,输出在其内部的东西: 2.在 PHP 定界符 EOF 中的任何特殊字符都不需要转义: 3.PHP 定界符 EOF
- BZOJ3514: Codechef MARCH14 GERALD07加强版(LCT,主席树)
Description N个点M条边的无向图,询问保留图中编号在[l,r]的边的时候图中的联通块个数. Input 第一行四个整数N.M.K.type,代表点数.边数.询问数以及询问是否加密.接下来M ...
- 【习题 7-3 UVA - 211】The Domino Effect
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每次搜素要往下还是要往右摆. 然后维护一下让每个下标只出现一次就可以了. =>作为剪枝条件 [代码] /* 1.Shoud i ...
- 18. springboot整合jsp
转自:https://blog.csdn.net/u012562943/article/details/51836729
- JS里面的indexOf()函数
stringObject.indexOf(searchvalue,formindex); searchvalue在字符串首次出现的位置,位置是从0开始算的.
- vsphere client 参数
转自:http://blog.163.com/sword_111/blog/static/66589416201422964544918/ C:\Program Files (x86)\VMware\ ...