同一页面上的语义多模态

Question

是否可以将多个模式附加到同一页面上的单独按钮？我遇到的问题是，当我单击其中一个按钮时，两个模式都会弹出。这些模态里面有表单，这就是为什么我把它们设置为不可关闭的原因。

主要HTML代码：

<table class="ui violet compact celled table">
.
.
.
<tfoot class="full-width">
    <tr>
        <th colspan="5">
            <div class="ui right floated small primary labeled icon billboard button">
                <i class="plus icon"></i> Add Slide
            </div>
            <div class="ui right floated small primary labeled icon button">
                <i class="minus icon"></i> Delete Slide(s)
            </div>
        </th>
    </tr>
</tfoot>
</table>

<table class="ui violet compact celled table">
.
.
.
<tfoot class="full-width">
    <tr>
        <th colspan="4">
            <div class="ui right floated small primary labeled icon campaign button">
                <i class="plus icon"></i> Add Slide
            </div>
            <div class="ui right floated small primary labeled icon button">
                <i class="minus icon"></i> Delete Slide(s)
            </div>
        </th>
    </tr>
</tfoot>
</table>

模态 HTML:

<div class="ui standard billboard modal" style="margin-top: -197.5px; display: block !important;">
.
.
.
</div>

<div class="ui standard campaign modal" style="margin-top: -197.5px; display: block !important;">
.
.
.
</div>

模态 JS:

$('.billboard.modal')
        .modal({
            closable  : false
        })
        .modal('attach events', '.billboard.button', 'show')
;

$('.campaign.modal')
        .modal({
            closable  : false
        })
        .modal('attach events', '.campaign.button', 'show')
;

Answer 1

我相信我找到了答案。在模态的 class 中，我刚刚添加了 'transition hidden'，这似乎解决了问题。

同一页面上的语义多模态

Semantic Multiple Modals On Same Page

semantic-ui