<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>自定义模态</title>

    <style>

        .cover {

            position: absolute;

            background-color: rgba(0, 0, 0, 0.4);

            top: 0;

            right: 0;

            left: 0;

            bottom: 0;

            z-index: 998;

        }

        .modal {

            height: 400px;

            width: 600px;

            background-color: white;

            position: absolute;

            top: 50%;

            left: 50%;

            margin-left: -300px;

            margin-top: -200px;

            z-index: 1000;

        }

        .hide {

            display: none;

        }

    </style>

</head>

<body>

<button id="b1">屠龙宝刀,点击就送</button>

<button id="b2">油腻的师姐,在哪里</button>

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

<div class="modal hide">

    <form action="">

        <p>

            <label for="">用户名:

                <input type="text">

            </label>

        </p>

        <p>

            <label for="">密码:

                <input type="password">

            </label>

        </p>

        <p>

            <input type="submit" value="登录">

            <input id="cancel" type="button" value="取消">

        </p>

    </form>

</div>

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

<script>

    //找出标签

    $("#b1,#b2").click(function () {

        //把cover和modal展示出来

        $(".cover").removeClass("hide");

        $(".modal").removeClass("hide");

    })

    $("#cancel").click(function () {

        $(".cover").addClass("hide");

        $(".modal").addClass("hide");

    })

</script>

</body>

</html>

　　

<jquery>基本的模态框的更多相关文章

  1. jquery 修改 bootstrap模态框的宽度并且居中

    1.定义模态框 <div class="modal fade" id="Project_Cell_Modal" tabindex="-1&quo ...

  2. jQuery 实现 bootstrap 模态框 删除确认

    思路: 点击删除按钮,通过jquery将删除操作的URL赋值到页面URL元素,并弹出会话框 用户点击确认,通过jquery获取URL,并发送删除请求至后台. 一.删除button <a clas ...

  3. 15款最好的 jQuery Modal（模态窗口）插件

    jQuery 模态窗口插件帮助网站开发人员显示网页中的特定内容,让用户聚焦到这个地方.模态窗口是嵌入到当前网页中,不用重定向到新网页的弹出窗口.这种技术可以用在图像画廊,电子商务网站,登陆框,电子邮件 ...

  4. 用jQuery写了一个模态框插件

    用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").con ...

  5. jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)

    一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...

  6. 五子棋项目总结 JavaScript+jQuery（插件写法）+bootstrap（模态框）

    Html部分(界面): 1.五子棋棋盘由canvas完成: 2.两个按钮,样式由bootstrap完成: 3.菜单按钮对应的模态框,可以选择游戏模式:玩家自由对战,和电脑对战,还可以指定谁先执子和哪个 ...

  7. jQuery点击弹出层，弹出模态框，点击模态框消失

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  8. jQuery练习：表单模态框

    代码:基于事件冒泡原理和事件委托 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta cha ...

  9. [TimLinux] JavaScript 模态框可拖动功能实现——jQuery版

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. Swift 环境搭建

    Swift 环境搭建 Swift是一门开源的编程语言,该语言用于开发OS X和iOS应用程序. 在正式开发应用程序前,我们需要搭建Swift开发环境,以便更好友好的使用各种开发工具和语言进行快速应用开 ...

  2. 后缀自动机求LCS——spoj-LCS

    经典题 注意匹配的时候:用t串去s串的SAM里进行匹配,和字典树一样遍历t中字符,用cur记录当前已经匹配的长度,如果能当前字符能匹配则cur++(这里不能直接用cur=len[now]),反之用li ...

  3. android高级篇收录

    Android运行时性能优化 1.android启动优化 支付宝客户端架构解析:Android 客户端启动速度优化之「垃圾回收」 支付宝 App 构建优化解析:通过安装包重排布优化 Android 端 ...

  4. 原生js实现文件下载并设置请求头header

    原生js实现文件下载并设置请求头header const token="自行定义";//如果有 /** * 向指定路径发送下载请求 * @param{String} url 请求路 ...

  5. JS对象的可枚举属性和不可枚举属性

    昨天在写文章(转载)的时候发现了有些对象的方法是分可枚举性和不可枚举性的.简单的查了一下资料,今天来捋一捋啥是对象的可枚举啥是不可枚举. 可枚举性: 对象的每一个属性都有一个描述对象,用来描述和控制该 ...

  6. P1613 跑路（倍增）

    P1613 跑路(倍增) 题目描述 小A的工作不仅繁琐,更有苛刻的规定,要求小A每天早上在6:00之前到达公司,否则这个月工资清零.可是小A偏偏又有赖床的坏毛病.于是为了保住自己的工资,小A买了一个十 ...

  7. 谈谈E语言

    基于中国文化底蕴的编程语言,  绝对不是E语言那个样子. 基于中文的编程,必将是计算机届的一次原子爆炸!

  8. Java-Class-@I：org.springframework.validation.annotation.Validated

    ylbtech-Java-Class-@I:org.springframework.validation.annotation.Validated 1.返回顶部   2.返回顶部 1. package ...

  9. c++-字符串和时间操作

    C++ 字符串 C++ 提供了以下两种类型的字符串表示形式: C 风格字符串 C++ 引入的 string 类类型 C 风格字符串 C 风格的字符串起源于 C 语言,并在 C++ 中继续得到支持.字符 ...

  10. OSI七层网络模型分别是哪七层？各运行那些协议？

    本文摘自:https://blog.csdn.net/JeremyZJM/article/details/78184775 应用层 DHCP · DNS · FTP · Gopher · HTTP · ...