bootstrap模态框

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

线上jquery引用地址

<script src="https://cdn.wmxxxx.com/js/jquery.js"></script>

线上bootstrap.js引用地址

<script src="https://cdn.wmxxxx.com/js/bootstrap.js"></script>

线上bootstrap.css引用地址

<link rel="stylesheet" type="" href="https://cdn.wmxxxx.com/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');
Last modification:July 29th, 2019 at 05:16 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

简爱博客