模态对话框练习

<!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. BZOJ4012 HNOI2015开店（树链剖分+主席树）

    考虑这样一个问题:一棵树初始全是白点,有两种操作:把一个点染黑:询问某点到所有黑点的距离之和. 注意到树上两点x和y的距离为depth[x]+depth[y]-depth[lca(x,y)]*2.要求 ...

  2. day30 __hash__ 计算哈希值

    hash() # __hash__哈希的时候会根据内存地址进行哈希,因为地址不同所以哈希的值也不同,哪怕是完全一样子的属性得出的哈希值也不一样因此存在需要某些时刻期望属性相同得出相同哈希值可以控制对象 ...

  3. CentOS 显示历史执行过的命令以及用户历史命令缓存文件

    1.history命令用于显示历史执行过的命令 执行 history命令能显示出当前用户在本地计算机中执行过的最近 1000 条命令记录. 如果觉得 1000 不够用,还可以自定义/etc/profi ...

  4. Nginx反代至Tomcat基于memcached的session保持

    实现功能:基于前面tomcat基础简介与示例文章 (1) tomcat cluster将会话保存至memcached中:实现模型: 这里写图片描述 配置B,C主机安装openjdk与tomcat[本次 ...

  5. 02 自学Aruba之无线频段---ISM频段及UNII频段

    点击返回:自学Aruba之路 02 自学Aruba之无线频段---ISM频段及UNII频段 1. 无线频段-ISM频段 ISM频段即工业,科学和医用频段.一般来说世界各国均保留了一些无线频段,以用于工 ...

  6. BZOJ3730 震波 | 动态点分治

    #include <cstdio> #include <cstring> #include <cmath> #include <algorithm> # ...

  7. .NET：C# 如何实现的闭包？

    背景 C# 在编译器层面为我们提供了闭包机制(Java7 和 Go 也是这种思路),本文简单的做个解释. 背景知识 你必须了解:引用类型.值类型.引用.对象.值类型的值(简称值). 关于引用.对象和值 ...

  8. typescript接口(学习笔记非干货)

    typescript的核心原则之一就是对所具有的shape类型检查结构性子类型化 One of the core principles of typescript is to check struct ...

  9. babel与ES6环境的搭建

    我们知道浏览器环境下直接运行ES6是存在一些兼容性问题的.那么把ES6变成ES5不就行了吗? 那如何将ES6转换成ES5呢?我们来搭建它的转换环境吧~ 第一步:初始化项目,建立写注意事项的README ...

  10. eclipse安装Spring Tool Suite 各个版本的方法

    有时候spring官网上找不到与我们当前eclipse对应的spring插件,用URL的方式安装费时又费力,那么如何下载对应的spring插件呢? 先到插件页面,然后点击“原先的插件版本” 显示出这个 ...