Bootsrap模式在页面加载时触发，每个用户一次

Bootsrap Modal to trigger on page load, once per user

本文关键字：用户一次模式加载 Bootsrap 更新时间：2023-09-26

我有以下代码放在我的基于Bootstrap的WordPress主题中，我想在页面加载时打开它，而不是点击按钮，并且每个用户第一次访问网站时只加载一次。

代码：

<div class="container">
    <div class="row">
        <div class="span12">
            <a data-toggle="modal" class="btn" href="#loginModal">Log in</a>
            <div class="modal hide" id="loginModal">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">✕</button>
                    <h3>Login to Website</h3>
                </div>
                    <div class="modal-body" style="text-align:center;">
                    <div class="row-fluid">
                        <div class="span10 offset1">
                            <div id="modalTab">
                                <div class="tab-content">
                                    <div class="tab-pane active" id="login">
                                        <form method="post" action='' name="login_form">
                                            <p><input type="text" class="span12" name="eid" id="email" placeholder="Email"></p>
                                            <p><input type="password" class="span12" name="passwd" placeholder="Password"></p>
                                            <p><button type="submit" class="btn btn-primary">Sign in</button>
                                            <a href="#forgotpassword" data-toggle="tab">Forgot Password?</a>
                                            </p>
                                        </form>
                                    </div>
                                    <div class="tab-pane fade" id="forgotpassword">
                                        <form method="post" action='' name="forgot_password">
                                            <p>Hey this stuff happens, send us your email and we'll reset it for you!</p>
                                            <input type="text" class="span12" name="eid" id="email" placeholder="Email">
                                            <p><button type="submit" class="btn btn-primary">Submit</button>
                                            <a href="#login" data-toggle="tab">Wait, I remember it now!</a>
                                            </p>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

谢谢，

您可以在就绪函数中使用以下代码打开模态

$('#myModal').modal();

如果你想按用户添加，那么你需要在加载时设置cookie。然后检查该cookie是否已设置。如果已设置，则不加载模态；如果未设置，则加载模态。

在这里查找Cookie参考资料太容易了。你会在给定的URL中找到设置、读取和擦除cookie的功能。