<!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. 陈云pytorch学习笔记_用50行代码搭建ResNet

    import torch as t import torch.nn as nn import torch.nn.functional as F from torchvision import mode ...

  2. CVE-2017-3248简单复现

    我是这样操作的 目标跟windows在一个段,linux是另一个段的,我的虚拟机 windows主机上 `java -cp ysoserial.jar ysoserial.exploit.JRMPLi ...

  3. 利用zk客户端删除solr shard

    进入zk客户端 ./bin/zkCli.sh -server ip:2181 显示所有的内容: ls / 删除数据: rmr /filename path

  4. Python做数据预处理

    在拿到一份数据准备做挖掘建模之前,首先需要进行初步的数据探索性分析(你愿意花十分钟系统了解数据分析方法吗?),对数据探索性分析之后要先进行一系列的数据预处理步骤.因为拿到的原始数据存在不完整.不一致. ...

  5. python包下载路径

    python所有包.模块镜像站 https://www.lfd.uci.edu/~gohlke/pythonlibs/

  6. docker删除常见命令

    $ docker stop $(docker ps -a | grep "Exited" | awk '{print $1 }') //停止容器 1b7067e19d6f a840 ...

  7. （十七）从UML角度来理解依赖

    UML软件建模 什么是依赖?简单理解就是一个类A用到了类B,但是这种使用关系是偶然性的.临时性的.非常弱的,类B的变化会影响到类A 显示依赖与隐式依赖 依赖倒置:我们要依赖于高层业务,不依赖于低层业务 ...

  8. window下apache2.2配置多个tomcat使用不同二级域名，共用80端口

    思路:分3步, 1,安装apache服务器httpd-2.2.25-win32-x86-no_ssl.msi,安装tomcat 2,配置tomcat默认访问的项目,配置apache服务器 3,测试 第 ...

  9. 使用Echarts的步骤

    Echarts官网地址:https://echarts.baidu.com/index.html 步骤如下: 1.获取Echarts (1)可以在Echarts官网去下载,选择需要的版本下载,根据开发 ...

  10. Dubbo的底层实现原理和机制

    –高性能和透明化的RPC远程服务调用方案 –SOA服务治理方案 Dubbo缺省协议采用单一长连接和NIO异步通讯, 适合于小数据量大并发的服务调用,以及服务消费者机器数远大于服务提供者机器数的情况