zoukankan      html  css  js  c++  java
  • 16、Semantic-UI之模态窗口

    16.1 定义模态窗口

    示例:定义基础的模态窗口

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Semantic UI </title>
        <!-- 使用CDN导入js和css 文件-->
        <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
        <script>
            $(function () {
                $(".ui.green.button").on("click",function () {
                    $(".ui.modal").modal("show");
                })
            })
        </script>
    </head>
    <body style="padding: 20px;">
        <div class="ui container">
            <div class="ui modal">
                <div class="header"><i class="user icon"></i>用户信息</div>
                <div class="content">
                    <p>Staryjie,您好,欢迎来到XXXX!</p>
                </div>
            </div>
            <button class="ui green button">查看</button>
        </div>
    </body>
    </html>
    

    示例:为模态窗口添加关闭按钮

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Semantic UI </title>
        <!-- 使用CDN导入js和css 文件-->
        <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
        <script>
            $(function () {
                $(".ui.green.button").on("click",function () {
                    $(".ui.modal").modal("show");
                })
            })
        </script>
    </head>
    <body style="padding: 20px;">
        <div class="ui container">
            <div class="ui modal">
                <i class="close icon"></i>
                <div class="header"><i class="user icon"></i>用户信息</div>
                <div class="content">
                    <p>Staryjie,您好,欢迎来到XXXX!</p>
                </div>
            </div>
            <button class="ui green button">查看</button>
        </div>
    </body>
    </html>
    

    示例:设置模态窗口的大小

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Semantic UI </title>
        <!-- 使用CDN导入js和css 文件-->
        <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
        <script>
            $(function () {
                $(".ui.green.button").on("click",function () {
                    $(".ui.modal").modal("show");
                })
            })
        </script>
    </head>
    <body style="padding: 20px;">
        <div class="ui container">
            <div class="ui tiny modal">
                <i class="close icon"></i>
                <div class="header"><i class="user icon"></i>用户信息</div>
                <div class="content">
                    <p>Staryjie,您好,欢迎来到XXXX!</p>
                </div>
            </div>
            <button class="ui green button">查看</button>
        </div>
    </body>
    </html>
    
  • 相关阅读:
    【深度学习Deep Learning】资料大全
    在谷歌中缓存下载视频离线观看,js代码
    asp.net mvc 中Html.ValidationSummary显示html
    asp.net网站访问时不能显示页面
    k8s install kubeadm网络原因访问不了谷哥and gpg: no valid OpenPGP data found. 解决办法
    火绒杀毒软件更安静
    Linux使用mount挂载Windows共享文件夹
    spark学习
    https://blog.csdn.net/tangdong3415/article/details/53432166
    正则表达式
  • 原文地址:https://www.cnblogs.com/jie-fang/p/10279573.html
Copyright © 2011-2022 走看看