Bootstrap 页面加载 4 模态 jquery?
Bootstrap 4 modal on page load sans jquery?
使用 Bootstrap 4,我在页面加载时很难显示模态。这是模态的代码...它直接来自在线资源:
</body>
<div class="modal fade" id="cookieModal" style="display: block;>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body content...........</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="/public/js/logic.js"></script>
</body>
我想通过为模式添加一个“id”名称并使用“style="display:block"我可以使用纯 Javascript 来控制显示。例如在我的外部(“逻辑”)文件:
addEventListener("load", initialize);
function initialize() {
var _warning = document.getElementById("cookieModal"); //for cookie modal display on page load...
_warning.style.display = "block"; //show the cookie modal...
}
但是模态框好像没有显示。任何人都可以在不使用 JQuery 的情况下给出一些建议......纯 JS 会很棒。我不喜欢 JQuery 并且不使用它。提前谢谢你了。
如果我得到你的问题,这会起作用;
使用 jquery;(抱歉使用 jquery 但这是 bootstrap 显示的方式。)
$(document).ready(function() {
$('#cookieModal').modal('show');
//If you want to hide it automatically after 5 secs.
setTimeout(function() {
$("#cookieModal").modal('hide');
}, 5000);
});
Bootstrap 4 个模态需要 jQuery。仅仅改变显示 属性 是不够的。
如果您不想使用 jQuery,请使用最新版本的 Bootstrap (5.0.0),它不需要 jQuery。
使用 Bootstrap 4,我在页面加载时很难显示模态。这是模态的代码...它直接来自在线资源:
</body>
<div class="modal fade" id="cookieModal" style="display: block;>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body content...........</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="/public/js/logic.js"></script>
</body>
我想通过为模式添加一个“id”名称并使用“style="display:block"我可以使用纯 Javascript 来控制显示。例如在我的外部(“逻辑”)文件:
addEventListener("load", initialize);
function initialize() {
var _warning = document.getElementById("cookieModal"); //for cookie modal display on page load...
_warning.style.display = "block"; //show the cookie modal...
}
但是模态框好像没有显示。任何人都可以在不使用 JQuery 的情况下给出一些建议......纯 JS 会很棒。我不喜欢 JQuery 并且不使用它。提前谢谢你了。
如果我得到你的问题,这会起作用; 使用 jquery;(抱歉使用 jquery 但这是 bootstrap 显示的方式。)
$(document).ready(function() {
$('#cookieModal').modal('show');
//If you want to hide it automatically after 5 secs.
setTimeout(function() {
$("#cookieModal").modal('hide');
}, 5000);
});
Bootstrap 4 个模态需要 jQuery。仅仅改变显示 属性 是不够的。
如果您不想使用 jQuery,请使用最新版本的 Bootstrap (5.0.0),它不需要 jQuery。