前言

若依(ruoyi)： v4.3

模态框

若依(ruoyi) 的模态框，实际为 Bootstrap 模态框（Modal）插件。使用方式参考Bootstrap 模态框（Modal）插件。

示例

若依(ruoyi) 自带的示例如下：

html 代码

<div class="ibox-content"><p>创建自定义的RuoYi模态窗口可通过添加<code>.inmodal</code>类来实现。 </p><div class="text-center"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开示例窗口</button></div><div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true"><div class="modal-dialog"><div class="modal-content animated bounceInRight"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button><i class="fa fa-laptop modal-icon"></i><h4 class="modal-title">窗口标题</h4><small class="font-bold">这里可以显示副标题。</div><div class="modal-body"><p><strong>RuoYi</strong>是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。</p><div class="form-group"><label>Email</label><input type="email" placeholder="请输入您的Email" class="form-control"></div></div><div class="modal-footer"><button type="button" class="btn btn-white" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">保存</button></div></div></div></div></div>

说明：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开示例窗口</button> 是按钮部分代码。关键点为 data-toggle="modal" data-target="#myModal"。
<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true"> ... </div> 是弹出框的内容部分代码。关键点为 id="myModal" 要与按钮部分一致。

运行效果：

参考

https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

【若依(ruoyi)】模态框相关推荐

bootstrap模态框显示控制
默认模态框弹出后,点击背景蒙层部分弹框会消失,如要解决,需要在模态框属性中加 aria-hidden="true" data-backdrop="static" ...
BootStrap 模态框禁用空白处点击关闭
转自(http://www.cnblogs.com/DayDreamEveryWhere/p/4550320.html) 模态框为信息编辑窗口,涉及好多内容,填了半天,若一不小心点了空白处..... ...
28 模态框拖动案例
1.模态框拖拽案例模态框也称为弹出框. 功能需求: 点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层鼠标放到模态框最上面一层,可以按 ...
html弹窗赋值给查询框,bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
Bootstrap模态框使用WebUploader点击失效问题解决
Bootstrap模态框使用WebUploader点击失效问题解决参考文章: (1)Bootstrap模态框使用WebUploader点击失效问题解决 (2)https://www.cnblogs. ...
js实现模态框点击空白关闭
面试的时候被问到了,这个问题我在网上一直没搜索到.不过bootstrap已经实现了. 在学习js事件委托的时候.想到可以解决这个问题. 在document添加点击监听,利用事件的捕获和冒泡,界面上的点 ...
模态框之Uncaught Error: Syntax error, unrecognized expression:
网页源码: <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3. ...
模态框在IE下的问题，即position:fixed在IE下不兼容的处理方式
项目中遇到的问题,模态框在IE下总出现如图所示双层遮罩框,经排查发现是由于bootstrap里写的modal的样式里position:fixed不兼容IE的原因,导致铺不满整个窗口. 解决方案:在项目 ...
html单击按钮时弹出输入框,点击按钮弹出模态框的一系列操作代码实例
实现功能提交按钮功能: 点击提交按钮的时候都会弹出模态框,但是有不同的状态: 审核状态未通过:弹出未通过理由的input输入框,模态框中除了取消和确定按钮,新增确定并保存医院的按钮审核状态已通过: ...

【若依(ruoyi)】模态框

前言

模态框

示例

参考

【若依(ruoyi)】模态框相关推荐

最新文章

热门文章