当前位置: 萬仟网 > IT编程>开发语言>Jquery > 模态框对话

模态框对话

2019年07月11日 14:29  | 萬仟网IT编程  | 我要评论

什么是模态框

简单来说,模态框就是在原有的界面上新增一个窗口,

以保证在不刷新网页的前提下和后台完成交互。

废话不多说,先来看效果图

如图,我们明显可以看到网页上面新增了一个窗口,这也就是常见的模态框样式

模态框结构

由上图看出,弹出的最上面一层和原本明显不在一层,模态框具体可分为三分:

1、文本层

  文本层就是原本的页面,他存在于三层图层最下面的一层

  不用操作样式

2、阴影层

  阴影层就是看着灰蒙蒙的那一层,位于三层图层中间的一层

  我们需要把阴影层进行定位(fixed),让他盖在文本层之上

3、弹出框层

  我们看到的和需要输入内容(完成信息的前后台交互)的一层就是弹出框层,

  位于三层图层最上面一层,我们也需要把这一层进行定位(fixed),使他位于阴影层之上显示

注:既然阴影层和弹出框层都需要定位(fixed),那么谁显示在上面就需要根据z-index来确定

简单模态框对话代码

1.先写html代码

2.再写css样式

3.利用jquery代码绑定点击事件

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>简易模态框</title>
    <style>
        /*我们先来把阴影层样式搞定,大小为全屏窗口,透明度调低一些,这样可以看到文本框的内容*/
        .shadow{
            width: 100vw;
            height: 100vh;
            background-color: black;
            opacity: 0.4;
            top: 0;
            left: 0;
            position: fixed;
            display: none;  /*先让他不显示,然后我们点击按钮显示*/
            z-index: 6;
        }
        /*弹出框层设置基本差不多,需要注意把z-index设的比阴影层高*/
        .frame{
            width: 300px;
            height: 300px;
            background-color: white;
            position: fixed;
            top: 200px;
            left: 400px;
            z-index: 66;
            display: none;  /*先让他不显示,然后我们点击按钮显示*/
        }
    </style>
</head>
<body>
<!--这里我们就把body当成我们的文本层-->
<h1>这是文本层</h1>
<button type="button" class="show">点我弹出模态框</button>

<!--再来创建阴影层-->
<div class="shadow"></div>

<!--创建弹出框层-->
<div class="frame">
    <span>这是弹出框层</span><br>
    <input type="text">
    <input type="button" value="提交" class="submit">
    <input type="button" value="取消" class="cancel">
</div>

</body>
<!--导入jquery-->
<script
  src="http://code.jquery.com/jquery-1.12.4.js"
  integrity="sha256-qw82+bxygq6mydymqbxnpytauxxq7c8v3cwiywllnxu="
  crossorigin="anonymous"></script>

<script>
    //第一步,我们需要监视文本层的按钮,一点击我们就把模态框显示出来
    $('.show').click(function () {
        $('.shadow').show();
        $('.frame').show();
    });
    //第二步,我们需要监视弹出框层的取消按钮,一点击就把模态框隐藏起来
    $('.cancel').click(function () {
        $('.shadow').hide();
        $('.frame').hide();
    });
    //到此位置,简易模态框就完成了
</script>

</html>

 

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com