Bootstrap 每个用户一次模态弹出

oyjwcjzk 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(4)|浏览(170)

在我的网站中，我使用了一个简单的模式弹出窗口和一些输入控件（名称、电子邮件、按钮）。

填写完所有必填字段后，如果用户按下“提交”按钮，他们将获得一个.pdf文件。
我在加载时启动模态。
在这里，我试图做到：

1.仅为用户打开一次模态弹出窗口，或
1.不希望向以前已填写表单的用户显示模式弹出窗口

下面是我的模态弹出窗口的代码：

<script type="text/javascript">
$(document).ready(function () {
    $("#eBookModal").modal('show');
});
</script>

<div class="modal fade" id="eBookModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <div class="row">
                    <h4 class="modal-title text-center" style="color:#FFFFFF;">Download eBook</h4>
                </div>
            </div>
            <div class="modal-body">
                <form role="form" id="eBookform" class="contact-form"
                      action="file.pdf">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="text" class="form-control form-text" name="FName" autocomplete="off" id="eBook_FName" placeholder="First Name" required>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="text" class="form-control form-text" name="LName" autocomplete="off" id="eBook_LName" placeholder="Last Name" required>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="email" class="form-control form-text" name="email" autocomplete="off" id="eBook_email" placeholder="E-mail" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 text-center" id="eBook_download">
                            <button type="submit" class="btn main-btn" style="color:#fff !important;">Download Now</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

twitter-bootstrap

来源：https://stackoverflow.com/questions/48327150/modal-pop-up-one-time-per-user

4条答案

按热度按时间

f87krz0w1#

你必须保存模态显示的记录。要存储该信息，你可以使用cookie或localStorage。根据存储的值，你可以决定是否显示模态。
下面的示例使用localStorage作为示例：

$(document).ready(function () {
    // Check if user saw the modal
    var key = 'hadModal',
        hadModal = localStorage.getItem(key);

    // Show the modal only if new user
    if (!hadModal) {
        $('#eBookModal').modal('show');
    }

    // If modal is displayed, store that in localStorage
    $('#eBookModal').on('shown.bs.modal', function () {
        localStorage.setItem(key, true);
    })
});

也可作为Codepen提供。
如果您只想对那些已经提交表单的用户隐藏模态，您应该在表单提交时设置标记，如下所示：

$('#eBookform').on('submit', function (event) {
    // event.preventDefault();// depending on your use case
    localStorage.setItem(key, true);
})

注：要复位存储值，只需调用localStorage.removeItem('hadModal')。

赞(0）回复(0）举报 2022-12-16

ldxq2e6h2#

如果你只是为了显示模态一次第一次访问和以前的代码没有工作试试这个！

$(window).load(function(){    
var Modal = document.getElementById('myModal'); 
var key = 'hadModal',
hadModal = localStorage.getItem(key);

if (!hadModal) {
    Modal.style.display = "block";
    localStorage.setItem(key, true);
}

});

赞(0）回复(0）举报 2022-12-16

9bfwbjaz3#

if (document.cookie.indexOf("ModalShown=true")<0) {
        jQuery(document).ready(function() {
                setTimeout(function(){
                   
                    $("#homepageModal").addClass("modal-show")
                }, 1000);
        });
        var date = new Date(),
            expires = 'expires=';
        date.setDate(date.getDate() + 1);
        expires += date.toGMTString();
        document.cookie = 'ModalShown=true ;' + expires + '; path=/';
    }

赞(0）回复(0）举报 2022-12-16

wxclj1h54#

如何在不使用jQuery的情况下让这个脚本在Bootstrap 5中工作？

$(document).ready(function () {
// Check if user saw the modal
var key = 'hadModal',
    hadModal = localStorage.getItem(key);

// Show the modal only if new user
if (!hadModal) {
    $('#eBookModal').modal('show');
}

// If modal is displayed, store that in localStorage
$('#eBookModal').on('shown.bs.modal', function () {
    localStorage.setItem(key, true);
})

}）;

赞(0）回复(0）举报 2022-12-16

我来回答

Bootstrap 每个用户一次模态弹出

4条答案

相关问题

热门标签

最新问答