模态对话框练习

<!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. HTML5-表单元素

    不是所有的浏览器都支持HTML5新的表单元素,但是可以使用他们,即使浏览器不支持表单属性,仍然可以显示为常规的表单元素 datalist 规定输入域的选项列表 //input的list属性值就是dat ...

  2. ceph API之PHP的客户端连接

    下载v2的SDK开发包http://pear.amazonwebservices.com/get/sdk-latest.zip 解压到目录下: unzip sdk-latest.zip &&a ...

  3. Sabotage UVA - 10480 （输出割边）

    题意:....emm...就是一个最小割最大流,.,...用dinic跑一遍.. 然后让你输出割边,就是 u为能从起点到达的点,  v为不能从起点到达的点 最后在残余路径中用dfs跑一遍  能到达的路 ...

  4. Spring事务说明与自实现

    要使用Springboot的事务其实非常简单,在启动类上添加@EnableTransactionManagement,在Service的类或者方法上使用@Transactional就可以了. 事务本身 ...

  5. Java 实现金额转换 代码示例

    金额转换,阿拉伯数字的金额转换成中国传统的形式如: (￥1011)→(壹仟零壹拾壹元整)输出. 分析: 金额转换,在开发财务相关软件时会经常用到,也是软件本地化的一个需要.一般开发公司或者团队都有相应 ...

  6. emWin 之 WM_SetCallback 创建回调函数

    @2018-7-11 [小记] emWin 通过函数 WM_SetCallback ( )  自定义回调函数 > 下段代码就是通过 MESSAGEBOX 控件的 OK 按键实现删除信息框的对话框 ...

  7. POJ1163(简单的DP）

    题目链接:http://poj.org/problem?id=1163 Description 73 88 1 02 7 4 44 5 2 6 5 (Figure 1) Figure 1 shows ...

  8. 树莓派上使用Slowloris进行DDoS攻击

    安装Slowloris工具 git clone https://github.com/gkbrk/slowloris.git 使用Slowloris进行攻击 进入Slowloris文件夹.cd slo ...

  9. A1090. Highest Price in Supply Chain

    A supply chain is a network of retailers(零售商), distributors(经销商), and suppliers(供应商)-- everyone invo ...

  10. hashlib模块（二十八）

    # 1.什么叫hash:hash是一种算法(3.x里代替了md5模块和sha模块,主要提供 SHA1, SHA224, SHA256, SHA384, SHA512 ,MD5 算法),该算法接受传入的 ...