在我的网站中,我使用带有一些输入控件(名称、电子邮件、按钮)的简单模式弹出窗口。 模态弹出窗口的目的是:
- 填写完所有必填字段后,如果用户按“提交”按钮,他们将获得一个 .pdf 文件。
- 我在加载时启动模式。
在这里,我正在尝试这样做:
- 仅为用户打开一次模式弹出窗口,或者
- 不想向之前已经填写过表单的用户显示模式弹出窗口
这是我的模式弹出窗口的代码:
<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">×</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>
最佳答案
您必须保留模式显示的记录。要存储该信息,您可以使用 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')
。
关于javascript - 每个用户弹出一次模态框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48327150/