BootStrap模态框2

最新推荐文章于 2022-03-16 12:00:33 发布

花果山总钻风

最新推荐文章于 2022-03-16 12:00:33 发布

阅读量1.7k

点赞数 2

分类专栏： BootStrap

本文链接：https://blog.csdn.net/dszgf5717/article/details/47347945

版权

BootStrap 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

中文教程地址：http://www.bootcss.com/

摘自《极客学院》

1、效果图：

2、html代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="bootstrap.min.css">
    <title>BootStrap模态框</title>
</head>
<body>
    <button class="btn btn-info" type="button" data-toggle="modal" data-target=".bs-large">
        大的模态框
    </button>
    <div class="modal bs-large" tabindex="-1" role="dialog" aria-labelledby="large-modal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                这是大的模态框
            </div>
        </div>
    </div>
    <button class="btn btn-info" type="button" data-toggle="modal" data-target=".bs-small">
        小的模态框
    </button>
    <div class="modal bs-small" tabindex="-1" role="dialog" aria-labelledby="small-modal" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                这是小的模态框
            </div>
        </div>
    </div>

    <button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@dmo">
        Open Modal for @dmo
    </button>
    <!--class="fade"渐变效果-->
    <div class="fade modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="haha" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 id="exampleModalLabel" class="modal-title">New Message</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">Recipient</label>
                        <input class="form-control" type="text" id="recipient-name">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success">Close</button>
                <button type="button" class="btn btn-primary">Send</button>
            </div>
        </div>
    </div>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script>
        $("#exampleModal").on("show.bs.modal", function(event){
            var button = $(event.relatedTarget);
            var recipient = button.data("whatever");
            var modal = $(this);
            modal.find(".modal-title").text("Nem Message To" + recipient);
            modal.find(".modal-boby input").val(recipient);
        })
    </script>
</body>
</html>

可能出现的问题：

1、页面呈现灰色

2、模态框闪退

解决方法：

1、bootstrap.min.js与modal.js不能混用。

2、触发模态框的组件需要设置 data-toggle=“modal”

3、设置 data-target="#myModal"或href="#myModal"或者写javascript 函数响应点击事件打开模态框，不能同时使用

4、换一个高版本的bootstrap.min.js