我正试图为一个wordpress网站项目提供一些潜在的成熟内容的内容警告。我尝试使用bootstrap模式,这是由jquery调用,但问题是它只覆盖页面时,整个页面本身完成加载。
它杀死了目的,因为页面将首先加载被覆盖。
我想问是否有一种方法可以在页面内容/正文开始加载之前加载和打开引导模态。或者,如果没有任何明智的方法来使用情态,我有什么可能的选择?谢谢你。
使用jQuery的一种可能性包括将当前网页包装在.page-wrap
类中,并使用display: none
的css属性。
兄弟这个.page-wrap
,你可以创建页面,将出现一旦一切都加载,.mature-content-warning
将有一个按钮,继续查看网站。
一旦用户点击.continue
按钮,页面将加载。
<div class="page-wrap" style="display: none;">
<h1>This is your site.</h1>
</div>
<div class="mature-content-warning">
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Mature Content Warning</h4>
</div>
<div class="modal-body">
<p class="lead">Are you 18 yrs old?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success continue" data-dismiss="modal">Yes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
<!-- vendors -->
<script src="vendors/jquery-1.11.3.min.js"></script>
<script src="vendors/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$(window).on('load', function() {
$('#myModal').modal('show');
});
$('.continue').on('click', function() {
$('.mature-content-warning').css('display', 'none');
$('.page-wrap').fadeIn();
});
});
</script>