zoukankan      html  css  js  c++  java
  • bootstrap的模态框的使用

    bootstrap的模态框

    如果只想单独使用模态框功能,可以单独引入modal.js,和bootstrap的css,在bootstrap的包中,可引入bootstrap.js。

    用法

    通过data属性,比如设置某个butto的data-toggle=’“modal”,同时设置 data-target="#myModal" 选择器内容,
    通过js直接用代码 $(’#myModal’).modal(options)
    模态框主要为三部分,model-head,modeal-body,model-footer,主要内容在body中显示,class="close"为一个关闭模态框样式。
    几个常用的方法 $(’#identifier’).modal(‘toggle’) 切换模态框状态
    $(’#identifier’).modal(‘show’) 显示模态框
    $(’#identifier’).modal(‘hide’) 隐藏模态框
    事件 作用 用法
    show.bs.modal 在调用 show 方法后触发。 $(’#myModal’).on(‘show.bs.modal’,function () {alert(“显示模态框”);});
    shown.bs.modal 在调用 show 方法后触发。 $(’#myModal’).on(‘shown.bs.modal’, function () {alert(“完全显示模态框”); });
    hide.bs.modal 在调用 hide 方法后触发。 $(’#myModal’).on(‘hide.bs.modal’, function () {alert(“隐藏模态框”);});
    hidden.bs.modal 在调用 hide 方法后触发。 $(’#myModal’).on(‘hidden.bs.modal’, function () {alert(“完全隐藏模态框”); });
    实例代码

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>shiro</title>

    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>



    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <script type="text/javascript">
    var basePath = "${pageContext.request.contextPath}";
    </script>
    </head>
    <body>

    <div class="container">


    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    开始演示模态框
    </button>
    <!-- 模态框(Modal) -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
    &times;
    </button>
    <h4 class="modal-title" id="myModalLabel">
    模态框(Modal)标题
    </h4>
    </div>
    <div class="modal-body">
    <div>我是模态框</div>
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
    </button>
    <button type="button" class="btn btn-primary">
    提交更改
    </button>
    </div>
    </div><!-- /.modal-content -->
    </div><!-- /.modal -->
    </div>


    </div>


    </body>
    <script type="text/javascript">



    $('#myModal').on('show.bs.modal', function () {
    alert("显示模态框");
    });

    $('#myModal').on('shown.bs.modal', function () {
    alert("完全显示模态框");
    });

    $('#myModal').on('hide.bs.modal', function () {
    alert("隐藏模态框");
    });

    $('#myModal').on('hidden.bs.modal', function () {
    alert("完全隐藏模态框");
    });


    </script>

    </html>
    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
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87

    ---------------------

  • 相关阅读:
    【BZOJ 2124】【CodeVS 1283】等差子序列
    【BZOJ 1036】【ZJOI 2008】树的统计Count
    【BZOJ 1901】【ZJU 2112】Dynamic Rankings
    【BZOJ 3924】【ZJOI 2015】幻想乡战略游戏
    【BZOJ 4103】【THUSC 2015】异或运算
    【BZOJ 4513】【SDOI 2016】储能表
    【HDU 3622】Bomb Game
    【BZOJ 3166】【HEOI 2013】Alo
    【BZOJ 3530】【SDOI 2014】数数
    【BZOJ 4567】【SCOI 2016】背单词
  • 原文地址:https://www.cnblogs.com/ly570/p/11192632.html
Copyright © 2011-2022 走看看