在我的网站中,我使用了一个简单的模式弹出窗口和一些输入控件(名称、电子邮件、按钮)。
- 填写完所有必填字段后,如果用户按下“提交”按钮,他们将获得一个.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">×</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>
4条答案
按热度按时间f87krz0w1#
你必须保存模态显示的记录。要存储该信息,你可以使用
cookie
或localStorage
。根据存储的值,你可以决定是否显示模态。下面的示例使用
localStorage
作为示例:也可作为Codepen提供。
如果您只想对那些已经提交表单的用户隐藏模态,您应该在表单提交时设置标记,如下所示:
注:要复位存储值,只需调用
localStorage.removeItem('hadModal')
。ldxq2e6h2#
如果你只是为了显示模态一次第一次访问和以前的代码没有工作试试这个!
9bfwbjaz3#
wxclj1h54#
如何在不使用jQuery的情况下让这个脚本在Bootstrap 5中工作?
});