模态对话框练习

<!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. 菜鸟学习计划浅谈之Linux系统 原

    人这一生都是在不断地学习,不断地进步中度过的,刚开始学习任何一门知识的时候,我们都习惯性的称自己为菜鸟,觉得自己对这方面的知识欠缺,水平很low,我也是如此.但我擅长总结,对于自己学习的新知识,总结学 ...

  2. 实现 60fps 的网易云音乐首页

    网易云音乐是一款很优秀的音乐软件,我也是它的忠实用户.最近在研究如何更好的开发TableView,接着我写了一个Model驱动的小框架 - MDTable.为了去验证框架的可用性,我选择了网易云音乐的 ...

  3. Surrounded Regions - LeetCode

    目录 题目链接 注意点 解法 小结 题目链接 https://leetcode.com/problems/surrounded-regions/ 注意点 边缘不算包围'O' 解法 解法一:dfs.找处 ...

  4. 洛谷 P1121 环状最大两段子段和 解题报告

    P1121 环状最大两段子段和 题目描述 给出一段环状序列,即认为\(A_1\)和\(A_N\)是相邻的,选出其中连续不重叠且非空的两段使得这两段和最大. 输入输出格式 输入格式: 第一行是一个正整数 ...

  5. 百度地图手机端单触点单击和长按事件，解决部分手机(小米手机)地图单击事件失效，多触点、拖动依然触发长按的bug

    /** * Author 岳晓 * * 对百度地图的事件扩展,目前扩展了fastclick和longclick, * 解决某些设备click不执行的问题 * 解决长按事件在拖动.多触点依然执行的bug ...

  6. 在 CentOS 6.x 上安装最新版本的 git

    在 CentOS 的默认仓库中有git,所以最简单的方法是: $ sudo yum install git 这种方法虽然简单,但是一般仓库里的版本更新不及时,比如 CentOS 仓库中的 git 最新 ...

  7. 洛谷 P1064 金明的预算方案(01背包问题)

    传送门:Problem 1064 https://www.cnblogs.com/violet-acmer/p/9852294.html 题解: 这道题是 “01”背包问题的变形. 如果不考虑买附件必 ...

  8. vue.js2.0开发中的几个技巧

    最近用Vue.js开发了几个项目,Vue的双向数据绑定和组件化让我耳目一新,减少了很多底层重复的工作,和基于jQuey的前端开发不起来,基于Vue的开发给我一种酣畅淋漓的感觉. 下面给出我基于Vue. ...

  9. mysql5.6下载及安装（超级详细）

    经过本人的实验,验证这些东西都是OK的 博客原文地址:http://www.cnblogs.com/Percy_Lee/p/5282187.html

  10. P2885 [USACO07NOV]电话线Telephone Wire

    P2885 [USACO07NOV]电话线Telephone Wire 最近,Farmer John的奶牛们越来越不满于牛棚里一塌糊涂的电话服务于是,她们要求FJ把那些老旧的电话线换成性能更好的新电话 ...