• 一种好看的模态框


    <!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;">
    " +
                                "    <div role="dialog" aria-modal="true" aria-label="提示详情" class="el-dialog" style="margin-top: 15vh;">
    " +
                                "        <div class="el-dialog__header"><span class="el-dialog__title">提示详情</span>
    " +
                                "            <button id='model-close' type="button" aria-label="Close" class="el-dialog__headerbtn"><i
    " +
                                "                    class="el-dialog__close el-icon el-icon-close"></i></button>
    " +
                                "        </div>
    " +
                                "        <div class="el-dialog__body">
    " +
                                "            <div data-v-7344a226="" class="el-tabs el-tabs--top el-tabs--border-card">
    " +
                                "                <div class="el-tabs__content">
    " +
                                "                    <div data-v-7344a226="" role="tabpanel" id="pane-事件详细信息" aria-labelledby="tab-事件详细信息"
    " +
                                "                         class="el-tab-pane" style="">
    " +
                                "                        <table data-v-7344a226="" border=".5" cellspacing="0" class="gridtable">
    " +
                                "                            <tr data-v-7344a226="" class="cla">
    " +
                                "                                <td data-v-7344a226="">序列号</td>
    " +
                                "                                <td data-v-7344a226="" colspan="2">" + "aaaaa" + "</td>
    " +
                                "                                <td data-v-7344a226="">应用名称</td>
    " +
                                "                                <td data-v-7344a226="" colspan="2">" + "aaaaa" + "</td>
    " +
                                "                                <td data-v-7344a226="">IP地址</td>
    " +
                                "                                <td data-v-7344a226="" colspan="2">" + "aaaaa" + "</td>
    " +
                                "                            </tr>
    " +
                                "                            <tr data-v-7344a226="" class="cla">
    " +
                                "                                <td data-v-7344a226="">提示级别</td>
    " +
                                "                                <td data-v-7344a226="" colspan="2" class="sever2">提示</td>
    " +
                                "                                <td data-v-7344a226="">提示类型</td>
    " +
                                "                                <td data-v-7344a226="" colspan="2">网络/设备/思科</td>
    " +
                                "                                <td data-v-7344a226="">环境类型</td>
    " +
                                "                                <td data-v-7344a226="" colspan="2">" + "aaaaa" + "</td>
    " +
                                "                            </tr>
    " +
                                "                            <tr data-v-7344a226="" class="cla">
    " +
                                "                                <td data-v-7344a226="">业务名称</td>
    " +
                                "                                <td data-v-7344a226="" colspan="2"></td>
    " +
                                "                                <td data-v-7344a226="">业务名称</td>
    " +
                                "                                <td data-v-7344a226="" colspan="2">home核心</td>
    " +
                                "                                <td data-v-7344a226="">维护状态</td>
    " +
                                "                                <td data-v-7344a226="" colspan="2">非维护期</td>
    " +
                                "                            </tr>
    " +
                                "                            <tr data-v-7344a226="" class="cla">
    " +
                                "                                <td data-v-7344a226="">首发时间</td>
    " +
                                "                                <td data-v-7344a226="" colspan="2">2019-09-24 19:51:03</td>
    " +
                                "                                <td data-v-7344a226="">最后时间</td>
    " +
                                "                                <td data-v-7344a226="" colspan="2">2019-09-24 19:51:03</td>
    " +
                                "                            </tr>
    " +
                                "                            <tr data-v-7344a226="" class="cla">
    " +
                                "                                <td data-v-7344a226="">详细内容</td>
    " +
                                "                                <td data-v-7344a226="" colspan="8" style=" 88.8%; max- 800px;">
    " +
                                "aaaaa" +
                                "                                </td>
    " +
                                "                            </tr>
    " +
                                "                        </table>
    " +
                                "                    </div>
    " +
                                "                </div>
    " +
                                "            </div>
    " +
                                "        </div>
    " +
                                "        <div class="el-dialog__footer">
    " +
                                "            <div data-v-7344a226="" class="dialog-footer">
    " +
                                "                <button id='model-fan' data-v-7344a226="" type="button" class="el-button el-button--default el-button--medium"><!---->
    " +
                                "                    <!----><span>关闭</span></button>
    " +
                                "            </div>
    " +
                                "        </div>
    " +
                                "    </div>
    " +
                                "</div>";
    
        $("#aaa").html(html_alarm)
    
    </script>
    
    </body>
    </html>
  • 相关阅读:
    配置缓存过期时间
    浏览器读取缓存流程
    nginx做代理的优化
    系统优化
    每日总结2.2
    每日总结2.1
    《构建之法》阅读笔记三
    每日总结1.29
    每日总结1.28
    每日总结1.27
  • 原文地址:https://www.cnblogs.com/aaronthon/p/12157045.html
Copyright © 2020-2023  润新知