<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>模态框样式</title> <link rel=stylesheet href="../static/bootstrap.css"> <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/aaronthon/module.css"> <style> .myModal { padding-left: 0; } </style> <script src="../static/jquery.js"></script> <script src="../static/bootstrap.js"></script> </head> <body> <div id="aaa"></div> <script> var html_alarm = "<div data-v-7344a226=\"\" class=\"el-dialog__wrapper gjxq\" style=\"z-index: 2009;\">\n" + " <div role=\"dialog\" aria-modal=\"true\" aria-label=\"提示详情\" class=\"el-dialog\" style=\"margin-top: 15vh;\">\n" + " <div class=\"el-dialog__header\"><span class=\"el-dialog__title\">提示详情</span>\n" + " <button id='model-close' type=\"button\" aria-label=\"Close\" class=\"el-dialog__headerbtn\"><i\n" + " class=\"el-dialog__close el-icon el-icon-close\"></i></button>\n" + " </div>\n" + " <div class=\"el-dialog__body\">\n" + " <div data-v-7344a226=\"\" class=\"el-tabs el-tabs--top el-tabs--border-card\">\n" + " <div class=\"el-tabs__content\">\n" + " <div data-v-7344a226=\"\" role=\"tabpanel\" id=\"pane-事件详细信息\" aria-labelledby=\"tab-事件详细信息\"\n" + " class=\"el-tab-pane\" style=\"\">\n" + " <table data-v-7344a226=\"\" border=\".5\" cellspacing=\"0\" class=\"gridtable\">\n" + " <tr data-v-7344a226=\"\" class=\"cla\">\n" + " <td data-v-7344a226=\"\">序列号</td>\n" + " <td data-v-7344a226=\"\" colspan=\"2\">" + "aaaaa" + "</td>\n" + " <td data-v-7344a226=\"\">应用名称</td>\n" + " <td data-v-7344a226=\"\" colspan=\"2\">" + "aaaaa" + "</td>\n" + " <td data-v-7344a226=\"\">IP地址</td>\n" + " <td data-v-7344a226=\"\" colspan=\"2\">" + "aaaaa" + "</td>\n" + " </tr>\n" + " <tr data-v-7344a226=\"\" class=\"cla\">\n" + " <td data-v-7344a226=\"\">提示级别</td>\n" + " <td data-v-7344a226=\"\" colspan=\"2\" class=\"sever2\">æ示</td>\n" + " <td data-v-7344a226=\"\">提示类型</td>\n" + " <td data-v-7344a226=\"\" colspan=\"2\">网络/设备/æ€ç§‘</td>\n" + " <td data-v-7344a226=\"\">环境类型</td>\n" + " <td data-v-7344a226=\"\" colspan=\"2\">" + "aaaaa" + "</td>\n" + " </tr>\n" + " <tr data-v-7344a226=\"\" class=\"cla\">\n" + " <td data-v-7344a226=\"\">业务名称</td>\n" + " <td data-v-7344a226=\"\" colspan=\"2\"></td>\n" + " <td data-v-7344a226=\"\">业务名称</td>\n" + " <td data-v-7344a226=\"\" colspan=\"2\">home核心</td>\n" + " <td data-v-7344a226=\"\">维护状态</td>\n" + " <td data-v-7344a226=\"\" colspan=\"2\">非维护期</td>\n" + " </tr>\n" + " <tr data-v-7344a226=\"\" class=\"cla\">\n" + " <td data-v-7344a226=\"\">首发时间</td>\n" + " <td data-v-7344a226=\"\" colspan=\"2\">2019-09-24 19:51:03</td>\n" + " <td data-v-7344a226=\"\">最后时间</td>\n" + " <td data-v-7344a226=\"\" colspan=\"2\">2019-09-24 19:51:03</td>\n" + " </tr>\n" + " <tr data-v-7344a226=\"\" class=\"cla\">\n" + " <td data-v-7344a226=\"\">详细内容</td>\n" + " <td data-v-7344a226=\"\" colspan=\"8\" style=\"width: 88.8%; max-width: 800px;\">\n" + "aaaaa" + " </td>\n" + " </tr>\n" + " </table>\n" + " </div>\n" + " </div>\n" + " </div>\n" + " </div>\n" + " <div class=\"el-dialog__footer\">\n" + " <div data-v-7344a226=\"\" class=\"dialog-footer\">\n" + " <button id='model-fan' data-v-7344a226=\"\" type=\"button\" class=\"el-button el-button--default el-button--medium\"><!---->\n" + " <!----><span>å…³é—</span></button>\n" + " </div>\n" + " </div>\n" + " </div>\n" + "</div>"; $("#aaa").html(html_alarm) </script> </body> </html>
一种好看的模态框
猜你喜欢
转载自www.cnblogs.com/aaronthon/p/12157045.html
今日推荐
周排行