模态对话框练习

<!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. BZOJ3625 [Codeforces Round #250]小朋友和二叉树（生成函数+多项式开根）

    设f(n)为权值为n的神犇二叉树个数.考虑如何递推求这个东西. 套路地枚举根节点的左右子树.则f(n)=Σf(i)f(n-i-cj),cj即根的权值.卷积的形式,cj也可以通过卷上一个多项式枚举.可以 ...

  2. 2015 HIAST Collegiate Programming Contest D

    You have been out of Syria for a long time, and you recently decided to come back. You remember that ...

  3. MessageBox函数第一个参数hwnd的作用

    MessageBox 函数用于创建.显示并操作一个消息对话框.该对话框包含由调用程序定义的信息和标题,以及预先定义的图标和按钮. 这个方法的第一个参数hWnd,代表消息框拥有的窗口.这个参数到底有什么 ...

  4. [luogu1131][bzoj1060][ZJOI2007]时态同步【树形DP】

    传送门:https://www.luogu.org/problemnew/show/P1131 题目大意 给你一棵树,每条边有边权,要求增加一些边的边权,使得根节点到每个叶子节点的距离相等,求出最少共 ...

  5. SharePoint “File not found” 错误

    Troubleshooting the SharePoint "File not found" Error Have you ever come across a "Fi ...

  6. SharePoint 2013 APP 开发示例 （六）服务端跨域访问 Web Service （REST API）

    上个示例(SharePoint 2013 APP 开发示例 (五)跨域访问 Web Service (REST API))是基于JavaScript,运行在web browser内去访问REST AP ...

  7. LoadRunner回放乱码

    乱码的原因和服务器字符集编码相关,默认LR是gbk解码,如果服务器是utf8,那么需要改为utf8解码,这样中文就显示正常了. 通过查看源码,可以知道服务器的编码方式:<meta charset ...

  8. A1056. Mice and Rice

    Mice and Rice is the name of a programming contest in which each programmer must write a piece of co ...

  9. hdu 2874(裸LCA)

    传送门:Problem 2874 https://www.cnblogs.com/violet-acmer/p/9686774.html 改了一晚上bug,悲伤辣么大,明天再补详细题解 题解: 题目中 ...

  10. 装饰页面decorators.xml

    WEB-INF/decorators.xml 这个配置可以增加页面的 装饰页面