模态对话框练习

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            margin: 0;

        }

        .hide{

            display: none;

        }

        .a1{

        }

        .a2{

            position:fixed;

            left:0;

            top:0;

            right:0;

            bottom:0;

            background-color:black;

            opacity:0.6;

            z-index:9;

        }

        .a3{

            width:500px;

            height:400px;

            background-color:white;

            position:fixed;

            left:50%;

            top:50%;

            margin-left:-250px;

            margin-top:-200px;

            z-index:10;

        }

    </style>

</head>

<body>

    <div class="a1 ">

        <input type="button" value="按钮" onclick="f1()">

    </div>

    <div class="a2 hide"></div>

    <div class="a3 hide">

        <input type="button" value="按钮" onclick="f2()">

    </div>

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

<script>

    function f1() {

        $('.a2').removeClass('hide').parent().children('.a3').removeClass('hide');

    }

    function f2() {

        $('.a2').addClass('hide').parent().children('.a3').addClass('hide');

    }

</script>

</body>

</html>

JavaScript练习 - 模态对话框的更多相关文章

  1. JavaScript内容梳理 示例之模态对话框 示例之全选和反选以及取消 示例之后台管理左侧菜单

    <!DOCTYPE html> <!--示例之模态对话框--> <html lang="en"> <head> <meta c ...

  2. 关于easyUI的模态对话框

    本文版权归博客园和作者吴双本人共同所有,转载和爬虫请注明原文地址.博客园蜗牛cnblogs.com/tdws 会用easyUI的模态对话框会是我们的开发更加简洁,只需下载这个插件,把需要的文件拖到项目 ...

  3. JavaScript插件——模态框

    Bootstrap3.0学习第十七轮(JavaScript插件——模态框)   前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/ ...

  4. 模态对话框 bootstrap-modal.js

    调用方式 通过data属性 无需编写JavaScript代码即可生成一个对话框.在一个主控元素,例如按钮,上设置data-toggle="modal",然后再设置data-targ ...

  5. bootstrap导航条+模态对话框+分页样式

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. js之模态对话框

    目标效果:点击页面按钮,显示模态对话框,在模态对话框里点击取消关闭模式对话框. 效果如下 实现代码如下: <!DOCTYPE html> <html lang="en&qu ...

  7. 15款基于 jQuery模态对话框

    在数字世界的竞争已大大增加.这就是为什么要确保网络设计的各个方面都是一流的,这是很重要的.从布局到一些非常小的东西,比如对话框,每一件都需要设计得很好.对话框通常被忽视,但它们可能对访问者有很大的影响 ...

  8. 【2048小游戏】——CSS/原生js爬坑之纯CSS模态对话框&游戏结束

    引言:2048小游戏的结束界面,使用纯CSS制作模态对话框,一般做模态对话框都会使用BootStrap自带的模态对话框组件方便使用,但在制作要运行在移动端的小项目时,就不能使用BootStrap,因为 ...

  9. 《手把手教你》系列技巧篇（二十八）-java+ selenium自动化测试-处理模态对话框弹窗（详解教程）

    1.简介 在前边的文章中窗口句柄切换宏哥介绍了switchTo方法,这篇继续介绍switchTo中关于处理alert弹窗的问题.很多时候,我们进入一个网站,就会弹窗一个alert框,有些我们直接关闭, ...

随机推荐

  1. BZOJ3676 APIO2014回文串（manacher+后缀自动机）

    由于本质不同的回文子串数量是O(n)的,考虑在对于每个回文子串在第一次找到它时对其暴力统计.可以发现manacher时若右端点移动则找到了一个新回文串.注意这样会漏掉串长为1的情况,特判一下. 现在问 ...

  2. Lights inside a 3d Grid UVA - 11605(概率)

    题意: 给出一个n * m * h的空间 每次任意选择两个点  使得在以这两个点连线为对角线的空间的点的值 取反  (初始为0) 求经过k次操作后最后有多少点的值为1 解析: 遇到坐标分维去看  把三 ...

  3. day25 上山练习 计算圆练习

    # 练习一:在终端输出如下信息 # 小明,10岁,男,上山去砍柴 # 小明,10岁,男,开车去东北 # 小明,10岁,男,最爱大保健 # 老李,90岁,男,上山去砍柴 # 老李,90岁,男,开车去东北 ...

  4. MT【58】反演圆和极线极点和谐统一

    解答:如图 评:1.反演圆及其性质介绍: 评2:此题的源头是1995年全国卷压轴题,这里用极线极点的相关性质也可以处理: 注:用相关点法很容易得到轨迹.

  5. MT【27】对数方程组求范围

    解答:3 评论:此类题目通性通法为换元后化归为线性规划问题.当然不等式凑配也是常见技巧,只是容易范围扩大或者缩小.

  6. Sublime text3 插件HTML/CSS/JS prettify 格式化代码

    1.首先安装插件 菜单的preference->packages control,然后输入install .. 回车,再输入HTML/CSS/JS prettify 再回车,重启后就可以了. 2 ...

  7. 自学Zabbix5.1 zabbix maintenance维护周期

    自学Zabbix5.1 zabbix maintenance维护周期 1. 概述 你可以定义维护周期在主机或主机组里.这里有2种维护状态: 依旧收集数据   继续对目标的监控数据的收集 暂停收集数据 ...

  8. [USACO 2018 December Contest]作业总结

    t1 Convention 题目大意 每一头牛都有一个来的时间,一共有\(n\)辆车,求出等待时间最长的那头牛等待的最小时间. 解法 第一眼看到这道题还以为是\(2018noip\)普及组的t3魔鬼题 ...

  9. intent 几种用法

    Intent 应该算是Android中特有的东西.你可以在Intent中指定程序 要执行的动作(比如:view,edit,dial),以及程序执行到该动作时所需要的资料.都指定好后,只要调用start ...

  10. 关于scrollintoview()真的是有意思极了，结合普通tab切换一起看看

    scrollIntoView(alignWithTop) 是html5新特性中的一个元素,他主要是指滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素. alignWithTop是true ...