注意引入顺序,一定要先引入jquery再引入bootstrap的js

线上jquery引用地址

<script src="https://cdn.nikm.cn/js/jquery.js"></script>

线上bootstrap.js引用地址

<script src="https://cdn.nikm.cn/js/bootstrap.js"></script>

线上bootstrap.css引用地址

<link rel="stylesheet" type="" href="https://cdn.nikm.cn/css/bootstrap.css">

最基本的模态框

<button class="btn btn-info" data-toggle="modal" data-target="#motaikuang">点我弹出模态框</button>
<div id="motaikuang" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">注册页面</div>
            <div class="modal-body">
                <form action="">
                    <p>用户名<input type="text"></p>
                    <p>密码<input type="password"></p>
                    <p><input type="submit" value="提交"></p>
                </form>
            </div>
        </div>
    </div>
</div>

隐藏模态框

$('#motaikuang').modal('hide');
最后修改:2019 年 07 月 29 日 05 : 16 PM
如果觉得我的文章对你有用,请随意赞赏