二次封装bootstrap模态框（模态表单窗口&模态文本窗口）

最新推荐文章于 2023-08-19 08:23:10 发布

Sspit

最新推荐文章于 2023-08-19 08:23:10 发布

阅读量301

点赞数

文章标签： Bootstrap jQuery

本文链接：https://blog.csdn.net/qq_35126546/article/details/100985839

版权

方便今后使用，统一封装了一下这个Modal，既然使用了Bootstrap这个UI库，那么就用jQuery喽！

1.代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312">
    <title>用户列表</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<script>
    $.fn.extend({
        ViewModal: function (opt) {
            $("#dialog").empty();
            if (!opt.html){
               alert("内容不存在");
                return
            }
            var html = "             <div class=\"modal fade\" id=\"myModal\">\n" +
                "                    <div class=\"modal-dialog\">\n" +
                "                        <div class=\"modal-content\">\n" +
                "                            <div class=\"modal-header\">\n" +
                "                                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\n" +
                "                                <h4 class=\"modal-title\" id=\"modal-title\">Modal 标题</h4>\n" +
                "                            </div>\n" +
                "                            <div class=\"modal-body\">\n" +
                "                                <form class=\"form-horizontal\" id=\"dialogForm\">\n" +
                opt.html+
                "                                </form>\n" +
                "                            </div>\n" +
                "                            <div class=\"modal-footer\">\n" +
                "                                <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">关闭</button>\n" +
                "                                <button type=\"button\" class=\"btn btn-primary\" id=\"submit-dialog\">确定</button>\n" +
                "                            </div>\n" +
                "                        </div>\n" +
                "                    </div>\n" +
                "                </div>"
            $("#dialog").append(html);
            if (opt.title) {
                $("#modal-title").text(opt.title);
            }
            $("#myModal").modal({
                backdrop: 'static',
            })
            $("#submit-dialog").on("click",function () {
                $("#myModal").modal("toggle")
            })
        },
        AjaxModal: function (opt,callback) {
            $("#dialog").empty();
            if (!opt.html){
               alert("内容不存在");
                return
            }
            var html = "             <div class=\"modal fade\" id=\"myModal\">\n" +
                "                    <div class=\"modal-dialog\">\n" +
                "                        <div class=\"modal-content\">\n" +
                "                            <div class=\"modal-header\">\n" +
                "                                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\n" +
                "                                <h4 class=\"modal-title\" id=\"modal-title\">Modal 标题</h4>\n" +
                "                            </div>\n" +
                "                            <div class=\"modal-body\">\n" +
                "                                <form class=\"form-horizontal\" id=\"dialogForm\">\n" +
                opt.html+
                "                                </form>\n" +
                "                            </div>\n" +
                "                            <div class=\"modal-footer\">\n" +
                "                                <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">关闭</button>\n" +
                "                                <button type=\"button\" class=\"btn btn-primary\" id=\"submit-dialog\">确定</button>\n" +
                "                            </div>\n" +
                "                        </div>\n" +
                "                    </div>\n" +
                "                </div>"
            $("#dialog").append(html);
            if (opt.title) {
                $("#modal-title").text(opt.title);
            }
            $("#myModal").modal({
                backdrop: 'static',
            })
            $("#submit-dialog").on("click",function () {
                var data = $("input[name=name]").val()
                // this.data = data;
                callback(data,$("#myModal"));
            })

        }
    })
    $(function () {
        $("body").append('  <div id="dialog"></div>');
        $("#modal1").on("click",function(){
            $(this).ViewModal({
                title : "Test1",
                html : "<div class='col-sm-12'>测试一下试试</div>"
            })
        })
        $("#modal2").on('click',function(){

            $(this).AjaxModal({
                title : '1234',
                html : "<div class='form-group'>"+
                        "<label class='control-label col-sm-2'>名字</label>"+
                        "<input class='form-control col-sm-10' type='text' name='name'>"+
                        "</div>"
            },function (data,selector) {
                console.log(data);
                selector.modal("toggle")
            })
        })
    })
</script>
<body>
<div class="container">
        <div class="btn btn-primary" id="modal1">Modal1</div>
    <div class="btn btn-primary" id="modal2">Modal2</div>
</div>
</body>
</html>

Sspit

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
二次封装bootstrap模态框（模态表单窗口&模态文本窗口）

方便今后使用，统一封装了一下这个Modal，既然使用了Bootstrap这个UI库，那么就用jQuery喽！1.代码<!DOCTYPE html><html><head> <meta charset="gb2312"> <title>用户列表</title> <link href="htt...
复制链接

扫一扫