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>
    
  • 相关阅读:
    使用python对mysql主从进行监控,并调用钉钉发送报警信息
    CentOS7下安装gitlab
    nginx日志自动切割
    Mysql定时备份数据脚本
    Linux下搭建FTP服务
    linux系统盘使用率达到100%的问题查找和解决方法
    CentOS6.5+nginx+mysql+php(laravel)服务器环境搭建
    RHEL6和RHEL7恢复root用户密码
    在Dell R720服务器上安装ESXI5.5时会出现卡在LSI_MR3.V00的解决方法
    /23 /24 /26/28 /29 /30或10.0.0.1/29这样怎么算服务器IP数是多少?
  • 原文地址:https://www.cnblogs.com/jie-fang/p/10279573.html
Copyright © 2011-2022 走看看