UIkit 上其他模态中的模态

2023-12-22

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

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

See the jsfiddle 演示 https://jsfiddle.net/davis88/6g80c1nf/6/.


您可以使用显示多个模态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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

UIkit 上其他模态中的模态 的相关文章

随机推荐

  • WPF——它一定比我做的更容易

    我正在花最长时间来解决这个问题 假设我有两个按钮和三个文本块 我希望任一按钮都能触发所有 TextBlock 上的简单情节提要 目前 我正在尝试定义一个包含故事板的通用文本块样式 然后触发器来自任何按钮单击 这是我最接近的一次 但应用程序在
  • 编译器在多线程程序中使用寄存器

    这是一个普遍问题 但是 在多线程程序中 编译器使用寄存器临时存储全局变量是否安全 我认为不是 因为在寄存器中存储全局变量可能会更改保存的值 对于其他线程 那么使用寄存器来存储函数中定义的局部变量怎么样 我认为这是可以的 因为没有其他线程能够
  • Python 程序的跟踪表

    有没有办法获取Python程序的跟踪表 或者让一个程序运行另一个程序并获取其跟踪表 我是一名老师 试图完美地验证我们在测试中使用的追踪问题的答案 例如 假设我有一个名为的 Python 程序problem1 py包含以下内容 问题1 py
  • 高效保存加权移动平均线的数据结构/算法

    我想在存储日志记录时总结多个不同类别的移动平均值 想象一下 有一项服务一次保存一个 Web 服务器日志条目 让我们进一步想象一下 我们无权访问记录的记录 所以我们只能看到它们一次 但之后就无法再访问它们了 对于不同的页面 我想知道 点击总数
  • 使用 git 和 MAMP 进行本地开发的权限

    我正在一个干净的帐户上设置一台新机器 我正在 Mac OSX 10 8 2 上使用 MAMP Pro 进行本地开发 并使用 git 进行版本控制 我遇到权限问题 MAMP Pro allows you to set permission t
  • 将 u32 数组中存储的大数转换为字节并返回

    我正在用 Rust 做一些计算数学 我有一些大数字 我将它们存储在一个包含 24 个值的数组中 我有将它们转换为字节并返回的函数 但它不能正常工作u32值 而它适用于u64 代码示例如下 fn main let mut bytes 0u8
  • 为数据存储中存储的图像发送“304 Not Modified”

    我将用户上传的图像存储在 Google App Engine 数据存储中db Blob 如提议的the docs http code google com appengine docs python images usingimages h
  • 要求对 VC++ 进行有关插入和安放的调查

    我正在调查以下成员函数期间执行了多少特殊成员函数vector insert emplace push back emplace back 在各种运行时条件下 我的目的是发表一篇论文 对这些成员函数进行相互比较 并比较 std lib 的每个
  • jspdf addHTML pagesplit 选项正在拉伸页面

    我已经尝试了互联网上的所有内容 这是我最后一次尝试看看这是否可能 我正在处理的是一个长而动态的 html 我必须将其转换为多页 pdf 我尝试了 addhtml 和 addImage 方法 但没有得到想要的结果 addhtml 当我使用 p
  • 如何提及命令的发送者?不和谐.py

    我创建了一个超级简单的 report
  • 如何使用jquery animate跨浏览器滚动到元素

    这段代码 jQuery body animate scrollTop target offset top 300 适用于 Firefox 但不适用于 Chrome 这段代码 jQuery html animate scrollTop tar
  • 如何在 PySpark ALS 中使用长用户 ID

    我尝试在 PySpark MLlib 1 3 1 的 ALS 模型中使用长用户 产品 ID 但遇到了问题 这里给出了代码的简化版本 from pyspark import SparkContext from pyspark mllib re
  • PHPExcel 异常:“无法关闭 zip 文件...”

    我使用 XAMPP Mac 进行本地开发 但我在工作中使用了这段代码 使用 Windows 和其他相同的开发环境 并且它工作得很好 objPHPExcel new PHPExcel sheet objPHPExcel gt createSh
  • 调整 rCharts 中的轴标签 NVD3 图表

    我正在使用 rChartsnPlot 函数在给定列联表类型数据的情况下显示堆叠或分组条形图 multiBarChart 显示在一个闪亮的应用程序中 下面给出了我在闪亮的应用程序中使用的一段代码 graphData lt reactive a
  • 导入数据覆盖下拉列表数据

    我使用下面的代码从另一个 Excel 文件导入 Excel 中的数据 此外 我还在 C 列和 E 列上设置了下拉列表 当我运行此宏时 它会覆盖下拉列表数据 我希望如果用户没有导入正确的名称和城市并且还给出该建议 它应该给出错误 如果我能实现
  • 择优挑选并将一系列提交压缩到子目录或子树中

    我如何告诉cherry pick 选择提交范围并压缩它 或者换句话说 将两次提交之间的差异应用到存储库的当前状态 下面的做法是not工作 cherry pick 没有 squash 选项 git cherry pick squash e06
  • 数据到音频并返回。调制/解调源代码

    我有一个二进制数据流 想要将其转换为原始波形声音数据 我可以将其发送到扬声器 这就是老式调制解调器所做的 以便通过电话线传输二进制数据 产生典型的调制解调器声音 这称为调制 然后我需要一个相反的过程 从原始波形样本中 我想获得精确的二进制数
  • Python 检查列表是否只包含空元素或空格

    我想检查列表是否只包含空元素或空格 例如 l n if all whitespace or empty for element in l return True 有人知道怎么做吗 那么你的空白简直就是str isspace so if al
  • CodeMirror:如何在光标位置之前或之后读取编辑器文本

    我试图找到一种方法来测试光标前面是否有特定字符串 然后触发事件 我正在尝试做的示例 用户单击编辑器内的某个位置 cursorActivity 光标或编辑器已更改 事件被触发 我捕获该事件并测试前 6 个字符是否与字符串匹配 color 如果
  • UIkit 上其他模态中的模态

    当我单击第二个模态时 第一个模态消失 但是 我也想保持开放 这是禁用该行为的方法吗 我还注意到其他框架 例如 Foundation 也有相同的行为 这是我的代码 a href my id Open Modal a div class uk