前言

• 若依(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)】模态框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。