UIkit 上其他模态中的模态

Question

当我单击第二个模式时，第一个模式消失了。但是，我也想保持开放！这是一种禁用该行为的方法吗？

我还注意到其他框架（例如 Foundation）具有相同的行为。

这是我的代码：

<a href="#my-id" data-uk-modal>Open Modal</a>
<div id="my-id" class="uk-modal">
    <div class="uk-modal-dialog"> 
        <a class="uk-modal-close uk-close"></a>
        <p>Lorem ipsum...</p> 
        <a href="#my-id2" data-uk-modal>Nested Modal</a>
    </div>
</div>
<div id="my-id2" class="uk-modal">
    <div class="uk-modal-dialog"> 
        <a class="uk-modal-close uk-close"></a>
        <p>Lorem ipsum...</p>
    </div>
</div>

请参阅jsfiddle demo。

Answer 1

您可以使用uk-modal="stack: true"显示多个模态

这里是代码

<button class="uk-button uk-button-default uk-margin-small-right" type="button" data-uk-toggle="target: #modal-example-1">Open</button>

<!-- This is the Parent modal -->
<div id="modal-example-1" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">Parent Modal</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p class="uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
            <button class="uk-button uk-button-primary" type="button">Save</button>
        </p>
        <button class="uk-button uk-button-default uk-margin-small-right" type="button" data-uk-toggle="target: #modal-example-2">Open</button>
    </div>
</div>

<!-- This is the Child modal -->
<div id="modal-example-2" uk-modal="stack: true">
    <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">Child Modal</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Answer 2

来自文档：

您可以在当前模态中触发新的模态。当第二个模式打开时，默认行为会关闭第一个模式。您可以通过添加data-uk-modal="{target:'#ID',modal:false}" 属性来防止这种情况发生。

比如：

<div>
    <h2>Multiple Modal</h2>
    <button class="uk-button" data-uk-modal="{target:'#modal1', modal: false}">Open Modal 1</button>

</div>

<!-- This is the modal 1-->
<div id="modal1" class="uk-modal">
    <div class="uk-modal-dialog">
        <h2>Modal 1</h2>
        <button class="uk-button" data-uk-modal="{target:'#modal2', modal: false}">Open Modal 2</button>      
    </div>
</div>


<!-- This is the modal 2-->
<div id="modal2" class="uk-modal">
    <div class="uk-modal-dialog">
        <h2>Modal 2</h2>
        <a class="uk-modal-close" href="#">Close Modal 2</a>
    </div>
</div>

应该可以。

我可以使用 javascript：

var modal1 = UIkit.modal("#modal1", {center: true, modal: false}),
    modal2 = UIkit.modal("#modal2", {modal: false});

Answer 3

你做了一些改变：

您的 HTML 代码：

<a href="#my-id" data-uk-modal >Open Modal</a>
<div id="my-id" class="uk-modal">
    <div class="uk-modal-dialog"> 
        <a class="uk-modal-close uk-close"></a>
        <p>Lorem ipsum...</p> 
        <a href="#my-id2" data-uk-modal>Nested Modal</a>
    </div>
</div>
<div id="my-id2" class="uk-modal">
    <div class="uk-modal-dialog"> 
        <a class="uk-modal-close uk-close"></a>
        <p>Lorem ipsum...</p>
    </div>
</div>

你的 jQuery 代码应该是这样的：

$(document).ready(function(){

    $.UIkit.modal('#my-id').show();
    $.UIkit.modal('#my-id2').show();  

});

这应该可行

Answer 4

我已经发布了新的代码，所以请试试这个：它会工作

<div>
    <h2>Multiple Modal</h2>
    <button class="uk-button" data-uk-modal="{target:'#modal1'}">Open Modal 1</button>

</div>

<!-- This is the modal 1-->
<div id="modal1" class="uk-modal">
    <div class="uk-modal-dialog">
        <h2>Modal 1</h2>
        <button class="uk-button" data-uk-modal="{target:'#modal2'}">Open Modal 2</button>      
    </div>
</div>


<!-- This is the modal 2-->
<div id="modal2" class="uk-modal">
    <div class="uk-modal-dialog">
        <h2>Modal 2</h2>
        <a class="uk-modal-close" href="#">Close Modal 2</a>
    </div>
</div>

这应该可以工作...

Answer 5

要覆盖两个 Modallayer，请在 Uikit3 中使用以下代码，如果您使用 JQuery 打开 Modal：

UIkit.modal("#yourmodalid", {center: true, stack: true}).show();

这会使第一个 Modallayer 保持打开状态。