Homework-06, Modal模态框

最新推荐文章于 2024-04-20 12:04:09 发布

_洋

最新推荐文章于 2024-04-20 12:04:09 发布

阅读量421

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/mantou_riji/article/details/121234437

版权

Homework-06, Modal模态框
Modal模态框是一种更灵活、更强大的自定义对话框
实现效果：当模态框被激活，覆盖在网页内容上，并在弹出的窗口中显式详细互交信息
参考：https://getbootstrap.net/docs/components/modal/
图示：
在这里插入图片描述

提示
（1）布局与样式
modal容器，全屏，默认隐藏，显式时绝对定位覆盖在显式窗口。包含modal-dialog容器
模态框容器背景色透明，而非元素透明，否则容器内的元素也会透明。rgba()
modal-dialog容器，为模态框信息容器，显式声明宽度，居中，相对modal定位，从而可以添加渐入渐出效果。可包含header/content/footer部分容器
modal-header容器，模态框内容中的标题区域，标题字体，边距/边框等
modal-content/modal-footer容器，主内容/页脚区域，字体/按钮组/边距等

（2）jquery
抽象设计模态框组件与激活组件。绑定模态框组件ID至激活组件的data-target自定义属性中。即，监听任何具有data-target属性组件的点击事件，获取其绑定的模态框id值，从而基于id获取模态框对象，渐出该模态框。
希望实现，当点击模态框内，对话框外，即空白背景区域时，关闭模态框。但空白区域不是独立的元素，是模态框元素的一部分。即，无法通过选择器选取该区域
如果给模态框容器整体添加点击监听，当点击模态框内的互交对话框时，一样会关闭模态框，从而无法实现与对话框的互交

事件的向上冒泡传递机制
当子元素事件被激活，一样会影响到父元素监听的事件。即，当激活子元素点击事件，如果父元素也注册了点击事件，则也会激活父元素的点击事件。即，事件的向上冒泡传播
因此，可通过在子元素中阻止事件的冒泡，实现在对话框内操作时，不会影响到模态框容器
实现，监听模态框内对话框的监听事件，回调中直接返回false，即可阻止激活父元素模态框的点击事件
任何具有自定义data-dismiss属性的元素被点击时，向上查询所有父元素节点，关闭其所在模态框
为modal-footer中的关闭按钮，赋自定义关闭属性

可通过animate()方法，添加对话框的动态定位，从默认的顶端，渐变定位到距上30px，即对话框从上向下渐入；关闭模态框时，再将对话框渐变定位到顶端，即，从下向上渐出

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>modal</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    .modal {
      width: 100vw;
      height: 100vh;
      display: none;
      background: rgba(0, 0, 0, 0.3);
      position: absolute;
      top: 0;
    }
    .modal-dialog {
      width: 500px;
      position: relative;
      margin: auto;
      background: #ffffff;
      border-radius: 5px;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    }
    .header {
      height: 50px;
      padding: 15px;
      border-bottom: 1px solid #b4b0b0;
    }
    .content {
      padding: 15px;
    }
    .footer {
      padding: 15px;
      text-align: right;
    }
    .btn {
      padding: 8px;
      margin: 2px;
      border-radius: 5px;
      border: none;
      color: white;
      font-size: 1em;
    }
    .btn-secondary {
      background-color: gray;
    }
    .btn-primary {
      background-color: #6363da;
    }
    .btn-fff{
      background-color: #6363da;
    }
  </style>
</head>
<body>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta ex laudantium ratione sint.
    Aperiam dignissimos enim eos ex laudantium maxime neque nobis nulla odio rem soluta totam, unde
    voluptatem voluptates, voluptatum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta ex laudantium ratione sint.
    Aperiam dignissimos enim eos ex laudantium maxime neque nobis nulla odio rem soluta totam, unde
    voluptatem voluptates, voluptatum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta ex laudantium ratione sint.
    Aperiam dignissimos enim eos ex laudantium maxime neque nobis nulla odio rem soluta totam, unde
    voluptatem voluptates, voluptatum!</p>
</div>
<button class="btn btn-fff" type="button" data-toggle="modal" data-target="#exampleModal">
  点击激活模态框
</button>
<div class="modal fade" id="exampleModal">
  <div class="modal-dialog">
    <div class="header">
      <h3 class="title" id="exampleModalLabel">Modal title</h3>
    </div>
    <div class="content">
      Woohoo, you're reading this text in a modal!
    </div>
    <div class="footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  //页面按钮
  $("[data-target]").click(function () {
    let id = $(this).data("target");
    //data()获取自定义属性，此时获取了#exampleModal的id
    let modal = `${id}`;
    //id是变量无需加引号
    $(modal).fadeIn();
    $(modal).children(".modal-dialog").animate({top: "30px"}, 300);
    $("button[data-dismiss]").css("border","none");
  });
  //点击容器，消失
  $(".modal").click(function () {
    $(this).fadeOut();
    $(this).children(".modal-dialog").animate({top: "0"}, 300);
  });
  //点击close，消失
  $("button[data-dismiss]").click(function () {
    $(this).css("border","2px solid #bd0c19");
    $(this).parents(".modal").fadeOut();
    $(this).parents(".modal").children(".modal-dialog").animate({top: "0"}, 300);
  });
  $(".modal .modal-dialog").click(false);
</script>
</body>
</html>

（1）data-target自定义属性，所以在jQuery中就可以通过data(“target”)获取相应的值。

（2）animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）

使用格式：animate({属性：属性值}，时间)
（时间属性可以不写）
如：
animate({height:“300px”})
animate({top: “30px”}, 300)
（3）事件的向上冒泡传递机制
传递>-<

其他实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        .btn{
            padding: 10px 25px;
            border-radius:5px;
            font-size: 20px;
            color: white;
            border: none;
        }
        .btn-primary{
            background-color: #6288e8;
            margin-left: 20px;
        }
        .btn-secondary{
            background-color: slategrey;
        }
        .modal{
            display: none;
            /*display: flex;*/
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            background-color: rgba(5, 5, 5, 0.1);
            /*justify-content: center;*/
            /*align-items: center;*/
            text-align: center;
        }
        .modal-content{
                display: none;
        }
        .modal-dialog{
        /*    内容框*/
            display: inline-block;
            position: relative;
            width: 50%;
            height: 40%;
            top: 100px;
            background-color:whitesmoke;
            border-radius: 5px;
            box-shadow: 5px 5px 5px lightgray;

        }
        .modal-header{
            padding: 20px;
            /*background-color: slategrey;*/
            border-bottom: lightgray 1px solid;
        }
        .row{/*12栅格布局*/
            display: flex;
            align-items: flex-start;/*上对齐*/
            flex-wrap: nowrap;
        }
        /*12栅格*/
        .col-md-12 {width: 100%;}
        .right{
            margin-left: auto;
            width: 25px;
            height: 25px;
            font-size: 25px;
            text-align: center;
            line-height: 25px; /*垂直居中*/
            border:none;
            background-color: rgba(0,0,0,0);
        }
        .modal-body{
            padding: 30px;
            /*background-color: grey;*/
            border-bottom: lightgray 1px solid;
        }
        .modal-footer{
            display: flex;
            padding: 20px;
            /*background-color: lightpink;*/
            justify-content:flex-end;
        }
        button:hover{
            box-shadow:5px 5px 5px gray;
        }

    </style>
</head>
<body>
<!-- Button trigger modal -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta ex laudantium ratione sint.
    Aperiam dignissimos enim eos ex laudantium maxime neque nobis nulla odio rem soluta totam, unde
    voluptatem voluptates, voluptatum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta ex laudantium ratione sint.
    Aperiam dignissimos enim eos ex laudantium maxime neque nobis nulla odio rem soluta totam, unde
    voluptatem voluptates, voluptatum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta ex laudantium ratione sint.
    Aperiam dignissimos enim eos ex laudantium maxime neque nobis nulla odio rem soluta totam, unde
    voluptatem voluptates, voluptatum!</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" >
    点击激活模态框
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" role="dialog">
    <div class="modal-content" >
    <div class="modal-dialog" role="document">
<!--            标题-->
            <div class="modal-header row col-md-12">
                <h2 class="modal-title" id="exampleModalLabel">Modal title</h2>
<!--                右上角叉号-->
                <button type="button" class="right" >
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
<!--            提示内容-->

            <div class="modal-body">
                Woohoo, you're reading this text in a modal!
            </div>
<!--            按钮-->

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>



<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
   $(function (){

       // 下拉出现
       $("p+button").click(function (){
           $(".modal").show();
           $(".modal-content").slideDown(100);
       })

       //close
       $(".right").click(function (){
           $(".modal-content").slideUp(100);
           $(".modal").hide();
       });
       //右上角x号
       $(".modal .btn-secondary").click(function (){
           $(".modal-content").slideUp(100);
           $(".modal").hide();
       });

       $(".modal").click(function(e){
           $(".modal-content").slideUp(100);
               $(".modal").hide();
       });
        $(".modal .modal-dialog").click(false);//防止子元素点击的时候，向上冒泡
   })
</script>


</body>
</html>

_洋

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Homework-06, Modal模态框

Homework-06, Modal模态框Modal模态框是一种更灵活、更强大的自定义对话框实现效果：当模态框被激活，覆盖在网页内容上，并在弹出的窗口中显式详细互交信息参考：https://getbootstrap.net/docs/components/modal/提示布局与样式modal容器，全屏，默认隐藏，显式时绝对定位覆盖在显式窗口。包含modal-dialog容器模态框容器背景色透明，而非元素透明，否则容器内的元素也会透明。rgba()modal-dialog容器，为模态框信息容器
复制链接

扫一扫