zoukankan      html  css  js  c++  java
  • 一种好看的模态框

    <!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>
  • 相关阅读:
    积水路面Wet Road Materials 2.3
    门控时钟问题
    饮料机问题
    Codeforces Round #340 (Div. 2) E. XOR and Favorite Number (莫队)
    Educational Codeforces Round 82 (Rated for Div. 2)部分题解
    Educational Codeforces Round 86 (Rated for Div. 2)部分题解
    Grakn Forces 2020部分题解
    2020 年百度之星·程序设计大赛
    POJ Nearest Common Ancestors (RMQ+树上dfs序求LCA)
    算法竞赛进阶指南 聚会 (LCA)
  • 原文地址:https://www.cnblogs.com/aaronthon/p/12157045.html
Copyright © 2011-2022 走看看