Modal提示框插件的使用

时间 2019-11-19

标签 modal 提示插件使用繁體版

原文原文链接

　　以前有记录过相似美化alert(),confirm()和prompt功能的插件xcConfirm，其优势是比较轻量级，可以快速接入，对于简单的提示效果明显，但其缺点就是自定义起来不方便，因此就记录一款相对较重可是能够随意定义的插件Modal，下面记录一下该款插件的使用方法，详情可参考Modal的官方文档http://v4.bootcss.com/getting-started/introduction/css

　　Modal插件使用须要接入bootstrap.css和bootstrap.js，因此去bootstrap官网对应下载后临时文件夹的目录以下：html

　　而后在temp.html内定义一个button和一个Modal(其中button和input的样式都来自于bootstrap.min.css :btn btn-default和form-control long),并对button设置data-target="Modal的id" data-toggle="modal" 属性来绑定对应的Modal,来实现一个简单的弹窗功能，html以下：jquery

<!doctype html>
<html>
    <head>
        <title>Modal测试</title>
        <!--引入bootstrap样式-->
        <link type='text/css' rel='stylesheet' href="bootstrap.min.css">
        <script src='jquery.js'></script>
        <script src='bootstrap.min.js'></script>
    </head>
    <body>
        <!--为button绑定Modal-->
        <button type='button' class='btn btn-default' data-target='#myModal' data-toggle='modal'>点我点我</button>
        
        <!--Modal部分,默认不显示，内部样式本身随意定义-->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" style="width: 700px;margin-top: 150px;">
                <div class="modal-content" style="height: 400px;width: 700px;padding-left: 10px;padding-right: 10px">
                    <!--头部-->
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">信息记录</h4>
                    </div>
                    <!--体部-->
                    <div class="modal-body" style="height: 200px">
                        <input class="form-control" placeholder="请输入标题" id="title" style="margin-bottom: 15px;"/>
                        <textarea class='form-control' placeholder="请输入内容" id="content" style='height:180px;'></textarea>
                    </div>
                    <!--尾部-->
                    <div class="modal-footer" style="margin-top: 75px;">
                        <button type="button" class="btn btn-primary btn-blue" onclick="myPrint()">确认</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

<script>
function myPrint() { var title=$("#title").val(); var content=$("#content").val(); alert(title+"\n"+content); } </script>

　　而后打开页面只有一个按钮：bootstrap

　　点击后就弹出Modal框：ide

　　这些input的样式，按钮的样式都是能够本身定义的，相对以前就方便许多。经过设置data-target="#myModal" data-toggle="modal"是让按钮自动绑定弹框，使其点击按钮时自动弹出与隐藏，其实若是只设置data-target="#myModal"就能够实现Modal框的手动弹出与隐藏了，这时只需在JS里调用测试

$("myModal").modal('show')和$("myModal").modal('hide')便可手动开关，这种状况比较适合于某一行带标识id参数的弹框处理，由于这时候要安排好弹框的前后顺序以及那个按钮的click()事件。最后再对Modal框上的“肯定按钮”和“取消按钮”绑定对应的方法便可，恩，仍是这种自定义的比较Under Control！ spa