Odoo 16 - QWeb 模板 - 在页面加载时显示模式

Question

我有一个带有模式窗口的页面。 我可以使用按钮和正确的 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>

Answer 1

我的出发点是https://jsfiddle.net/asicfr/ZsCkN/

我到达了这个片段：

#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>

我的改变：

• 我添加了 CSS，这样我们就有了背景，并且

  display: block;

  不会内联
• 我将

  in

  类添加到

  modal fade

• 我添加了

  onclick

  属性来处理点击。模式将出现在页面加载时，而无需这些 onclick 属性，但为了这个示例，我更愿意使其更具功能性
• 我在模态中添加了一个 id，以确保我的 CSS 规则应用于并且仅应用于它