好看的“弹出框”model的使用

好看的“弹出框”model的使用

刚开始接触HTML时，一直有个问题让人非常的烦恼——弹出框alert，它太丑了。
总是想修改它的样式，让它好看一些，或者实现其他的功能。
现在就介绍一种方法：model。
model是bootstrap下的内容，使用前需要引入bootstrap的css以及js。
下面是使用model的示例代码

        <!-- Modal默认是隐藏起来的 -->
        <div class="modal fade" id="accountModal" tabindex="-1" role="dialog" aria-labelledby="accountModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <!-- 框框右上角的叉叉按钮，关闭的实现是静态方法：data-dismiss="modal" -->
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <!-- 弹出框的标题 -->
                        <h4 class="modal-title" id="accountModalLabel">账号信息</h4>
                    </div>

                    <div class="modal-body">
                        <div class="row">                     
                            <div class="col-lg-12">
                                <div class="col-lg-2"><h3>昵称:</h3></div>
                                <div class="col-lg-8"><h3 id="nickname"></h3></div>
                            </div>               
                            <div class="col-lg-12">
                                <div class="col-lg-2"><h3>手机号:</h3></div>
                                <div class="col-lg-8"><h3 id="mobile"></h3></div>
                            </div>
                            <div class="col-lg-12">
                                <div class="col-lg-2"><h3>姓名:</h3></div>
                                <div class="col-lg-8"><h3 id="realName"></h3></div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

想要使框框弹出，需要在js中使用方法：

$("#accountModal").modal("show");

当然，这是动态的调用方法，也有静态方法：
只需要通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle=“modal”，同时设置 data-target="# accountModal " 或 href="# accountModal" 来指定要切换的特定的模态框（带有 id=" accountModal"）