我有一个带有模式窗口的页面。我可以使用按钮和正确的 data-bs- 属性来显示和隐藏此模式。
现在,我想要的是在页面加载时显示模式。似乎唯一正确的方法是在 JS 中获取模态元素并调用其 .show() 方法。
但我不知道如何在仅限 qweb 的模板上执行此操作。有办法吗
<template id="my_template" name="Hello there">
<t t-call="portal.portal_layout">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="my_modal">
Show Modal
</button>
<!-- I want this modal to pop up on page load as weel as being able to toggle it with my button -->
<div id="my_modal" tabindex="-1" role="dialog" class="modal fade">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="my_modal_title">Hi</h5>
<button type="button" class="btn text-danger" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fa fa-close"/></span>
</button>
</div>
<div class="modal-body">
Content ...
</div>
</div>
</div>
</div>
</t>
</template>
我的出发点是https://jsfiddle.net/asicfr/ZsCkN/
我的改变:
display: block;
不会内联in
类添加到 modal fade
onclick
属性来处理点击。模式也将出现在页面加载时,而无需这些 onclick 属性,但为了这个示例,我更愿意使其更具功能性#mymodal.in {
display: block;
background-color: rgba(100, 100, 100, 0.4);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<a class="btn btn-primary btn-large" data-toggle="modal" data-target=".modal">Launch demo modal</a>
<div id="mymodal" class="modal fade in" onclick="this.classList.remove('in'); this.style.display='none';">
<div class="modal-dialog modal-sm" onclick="event.stopPropagation();">
<div class="modal-content">
<div class="modal-body">
Body sdfmlkmlkfmlkmlqsk mlqks fmlf kqsmlf kqmlskf mlqkf mlksqmlf sqmlf kmlsq kfmlqs ksqmlf mlsqkf mlqsfmlfjqmot jumoqfj mlsf poz poifml jsqmlf jjf jsqf mljqsù^lr u^p uôjf ù^j ù fr^fùm^jsqf ùlqjsjqsml uôsq uo^qus tôs js usq ùlsqùl uùôur ù^su fùsq
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>