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

最新推荐文章于 2024-10-18 08:07:37 发布

原创最新推荐文章于 2024-10-18 08:07:37 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#model #bootstrap #弹出框

前端（bootstrap）专栏收录该内容

20 篇文章

订阅专栏

博客介绍了一种好看的弹出框使用方法——model。它是bootstrap下的内容，使用前需引入bootstrap的css及js。文中给出了使用model的示例代码，还介绍了动态和静态调用方法，静态方法可通过data属性指定要切换的模态框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好看的“弹出框”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"）