【问题标题】:Modal within other modal on UIkitUIkit 上其他模态中的模态
【发布时间】:2015-07-01 11:23:34
【问题描述】:

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

我还注意到其他框架(例如 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

【问题讨论】:

    标签: modal-dialog uikit


    【解决方案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>
    

    【讨论】:

    【解决方案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});
    

    【讨论】:

      【解决方案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();  
      
      });
      

      这应该可行

      【讨论】:

      • 我尝试了您的建议,但没有成功。查看演示 here
      • nah.. 如果您删除 jquery 行,它将起作用;p
      【解决方案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>
      

      这应该可以工作...

      【讨论】:

      • 同样,这不起作用,因为当您单击第二个模态时,第一个模态会消失。
      【解决方案5】:

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

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

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

      【讨论】:

      • 现有的答案已经涵盖了这个,jQuery与它无关
      猜你喜欢
      • 1970-01-01
      • 2020-04-07
      • 2018-09-05
      • 1970-01-01
      • 2017-09-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多