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>
  • 相关阅读:
    LG P4161 [SCOI2009]游戏/LG P6280 [USACO20OPEN]Exercise G
    BZOJ3473 字符串
    BZOJ4545 DQS的trie
    LG P5212 SubString
    batj ,tmd用的都是什么技术。
    java社招面试题目
    python,go,java 的发展
    互联网 后端技术必备知识
    java语言三件套
    java spring全家桶
  • 原文地址:https://www.cnblogs.com/aaronthon/p/12157045.html
Copyright © 2011-2022 走看看