Browse Source

修复弹窗样式上的bug

笔下光年 5 years ago
parent
commit
6d8d398435
5 changed files with 48 additions and 24 deletions
  1. 3 0
      README.md
  2. 2 0
      css/style.min.css
  3. 9 0
      lyear_pages_data_table.html
  4. 10 0
      lyear_pages_doc.html
  5. 24 24
      lyear_ui_other.html

+ 3 - 0
README.md

@@ -50,6 +50,9 @@
 - Bootstrap-Multitabs
 
 #### 更新记录
+2020.07.02
+修复弹窗样式上的bug
+
 2020.06.19
 新增通用样式,调整复选框单选框换行后左侧空白问题,修复bootstrap-table.min.js文件,调整tags插件
 

+ 2 - 0
css/style.min.css

@@ -179,6 +179,8 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
     padding-top: .3em;
     border-radius: 2px;
     font-weight: 300;
+    font-size: 12px;
+    line-height: 2;
 }
 .label-default {
     background-color: #f5f6f7;

+ 9 - 0
lyear_pages_data_table.html

@@ -180,6 +180,9 @@ $('#tb_departments').bootstrapTable({
             },
             'click .del-btn': function (event, value, row, index) {
                 delUser(row.id);
+            },
+            'click .show-btn': function (event, value, row, index) {
+                showUser(row);
             }
         }
     }],
@@ -214,6 +217,7 @@ function btnGroup ()
 {
     let html =
         '<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
+        '<a href="#!" class="btn btn-xs btn-default m-r-5 show-btn" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>' +
         '<a href="#!" class="btn btn-xs btn-default del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
     return html;
 }
@@ -228,6 +232,11 @@ function delUser()
 {
     alert('信息删除成功');
 }
+// 操作方法 - 查看
+function showUser()
+{
+    alert('查看详细');
+}
 </script>
 
 <!--以下是tree-grid的使用示例-->

+ 10 - 0
lyear_pages_doc.html

@@ -78,6 +78,7 @@
                   <td>
                     <div class="btn-group">
                       <a class="btn btn-xs btn-default" href="#!" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
+                      <a class="btn btn-xs btn-default" href="#!" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>
                       <a class="btn btn-xs btn-default" href="#!" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                     </div>
                   </td>
@@ -97,6 +98,7 @@
                   <td>
                     <div class="btn-group">
                       <a class="btn btn-xs btn-default" href="#!" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
+                      <a class="btn btn-xs btn-default" href="#!" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>
                       <a class="btn btn-xs btn-default" href="#!" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                     </div>
                   </td>
@@ -116,6 +118,7 @@
                   <td>
                     <div class="btn-group">
                       <a class="btn btn-xs btn-default" href="#!" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
+                      <a class="btn btn-xs btn-default" href="#!" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>
                       <a class="btn btn-xs btn-default" href="#!" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                     </div>
                   </td>
@@ -135,6 +138,7 @@
                   <td>
                     <div class="btn-group">
                       <a class="btn btn-xs btn-default" href="#!" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
+                      <a class="btn btn-xs btn-default" href="#!" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>
                       <a class="btn btn-xs btn-default" href="#!" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                     </div>
                   </td>
@@ -154,6 +158,7 @@
                   <td>
                     <div class="btn-group">
                       <a class="btn btn-xs btn-default" href="#!" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
+                      <a class="btn btn-xs btn-default" href="#!" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>
                       <a class="btn btn-xs btn-default" href="#!" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                     </div>
                   </td>
@@ -173,6 +178,7 @@
                   <td>
                     <div class="btn-group">
                       <a class="btn btn-xs btn-default" href="#!" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
+                      <a class="btn btn-xs btn-default" href="#!" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>
                       <a class="btn btn-xs btn-default" href="#!" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                     </div>
                   </td>
@@ -192,6 +198,7 @@
                   <td>
                     <div class="btn-group">
                       <a class="btn btn-xs btn-default" href="#!" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
+                      <a class="btn btn-xs btn-default" href="#!" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>
                       <a class="btn btn-xs btn-default" href="#!" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                     </div>
                   </td>
@@ -211,6 +218,7 @@
                   <td>
                     <div class="btn-group">
                       <a class="btn btn-xs btn-default" href="#!" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
+                      <a class="btn btn-xs btn-default" href="#!" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>
                       <a class="btn btn-xs btn-default" href="#!" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                     </div>
                   </td>
@@ -230,6 +238,7 @@
                   <td>
                     <div class="btn-group">
                       <a class="btn btn-xs btn-default" href="#!" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
+                      <a class="btn btn-xs btn-default" href="#!" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>
                       <a class="btn btn-xs btn-default" href="#!" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                     </div>
                   </td>
@@ -249,6 +258,7 @@
                   <td>
                     <div class="btn-group">
                       <a class="btn btn-xs btn-default" href="#!" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
+                      <a class="btn btn-xs btn-default" href="#!" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>
                       <a class="btn btn-xs btn-default" href="#!" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                     </div>
                   </td>

+ 24 - 24
lyear_ui_other.html

@@ -17,7 +17,7 @@
 <div class="container-fluid p-t-15">
   
   <div class="row">
-    <div class="col-lg-12">
+    <div class="col-md-12">
       <div class="card">
         <div class="card-header"><h4>标签</h4></div>
         <div class="card-body">
@@ -238,48 +238,48 @@
           </div>
           <p>列表组中的元素也可以直接就是按钮(也同时意味着父元素必须是 <code>&lt;div&gt;</code> 而不能用 <code>&lt;ul&gt;</code> 了),并且无需为每个按钮单独包裹一个父元素。<strong class="text-danger">注意不要使用标准的 <code>.btn</code> 类!</strong></p>
           <div class="list-group">
-            <button type="button" class="list-group-item">Cras justo odio</button>
-            <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
-            <button type="button" class="list-group-item">Morbi leo risus</button>
-            <button type="button" class="list-group-item">Porta ac consectetur ac</button>
-            <button type="button" class="list-group-item">Vestibulum at eros</button>
+            <button type="button" class="list-group-item">第一回 张天师祈禳瘟疫 洪太尉误走妖魔</button>
+            <button type="button" class="list-group-item">第二回 王教头私走延安府 九纹龙大闹史家村</button>
+            <button type="button" class="list-group-item">第三回 史大郎夜走华阴县 鲁提辖拳打镇关西</button>
+            <button type="button" class="list-group-item">第四回 赵员外重修文殊院 鲁智深大闹五台山</button>
+            <button type="button" class="list-group-item">第五回 小霸王醉入销金帐 花和尚大闹桃花村</button>
           </div>
           <p>为 <code>.list-group-item</code> 添加 <code>.disabled</code> 类可以让单个条目显示为灰色,表现出被禁用的效果。</p>
           <div class="list-group">
             <a href="#!" class="list-group-item disabled">
               Cras justo odio
             </a>
-            <a href="#!" class="list-group-item">Dapibus ac facilisis in</a>
-            <a href="#!" class="list-group-item">Morbi leo risus</a>
-            <a href="#!" class="list-group-item">Porta ac consectetur ac</a>
-            <a href="#!" class="list-group-item">Vestibulum at eros</a>
+            <a href="#!" class="list-group-item">第六回 九纹龙剪径赤松林 鲁智深火烧瓦罐寺</a>
+            <a href="#!" class="list-group-item">第七回 花和尚倒拔垂杨柳 豹子头误入白虎堂</a>
+            <a href="#!" class="list-group-item">第八回 林教头刺配沧州道 鲁智深大闹野猪林</a>
+            <a href="#!" class="list-group-item">第九回 柴进门招天下客 林冲棒打洪教头</a>
           </div>
           <p>为列表中的条目添加情境类,默认样式或链接列表都可以。还可以为列表中的条目设置 <code>.active</code> 状态。</p>
           <ul class="list-group">
-            <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
-            <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
-            <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
-            <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
+            <li class="list-group-item list-group-item-success">第十回 林教头风雪山神庙 陆虞候火烧草料场</li>
+            <li class="list-group-item list-group-item-info">第十一回 朱贵水亭施号箭 林冲雪夜上梁山</li>
+            <li class="list-group-item list-group-item-warning">第十二回 梁山泊林冲落草 汴京城杨志卖刀</li>
+            <li class="list-group-item list-group-item-danger">第十三回 急先锋东郭争功 青面兽北京斗武</li>
           </ul>
           <div class="list-group">
-            <a href="#!" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
-            <a href="#!" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
-            <a href="#!" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
-            <a href="#!" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
+            <a href="#!" class="list-group-item list-group-item-success">第十四回 赤发鬼醉卧灵官殿 晁天王认义东溪村</a>
+            <a href="#!" class="list-group-item list-group-item-info">第十五回 吴学究说三阮撞筹 公孙胜应七星聚义</a>
+            <a href="#!" class="list-group-item list-group-item-warning">第十六回 杨志押送金银担 吴用智取生辰纲</a>
+            <a href="#!" class="list-group-item list-group-item-danger">第十七回 花和尚单打二龙山 青面兽双夺宝珠寺</a>
           </div>
           <p>列表组中的每个元素都可以是任何 HTML 内容,甚至是像下面的带链接的列表组。</p>
           <div class="list-group">
             <a href="#!" class="list-group-item active">
-              <h4 class="list-group-item-heading">List group item heading</h4>
-              <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+              <h4 class="list-group-item-heading">第十八回 美髯公智稳插翅虎 宋公明私放晁天王</h4>
+              <p class="list-group-item-text">当时何观察与兄弟何清道:“这锭银子,是官司信赏的,非是我把来赚你,后头再有重赏。</p>
             </a>
             <a href="#!" class="list-group-item">
-              <h4 class="list-group-item-heading">List group item heading</h4>
-              <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+              <h4 class="list-group-item-heading">第十九回 林冲水寨大?火 晁盖梁山小夺泊</h4>
+              <p class="list-group-item-text">话说当下何观察领了知府台旨下厅来,随即到机密房里,与众人商议。</p>
             </a>
             <a href="#!" class="list-group-item">
-              <h4 class="list-group-item-heading">List group item heading</h4>
-              <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+              <h4 class="list-group-item-heading">第二十回 梁山泊义士尊晁盖 郓城县月夜走刘唐</h4>
+              <p class="list-group-item-text">话说林冲杀了王伦,手拿尖刀,指着众人说道:“据林冲虽系禁军遭配到此,今日为众豪杰至此相聚,争奈王伦心胸狭隘,嫉贤妒能,推故不纳,因此火并了这厮,非林冲要图此位。</p>
             </a>
           </div>