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>
    
  • 相关阅读:
    maven
    shell脚本--循环结构
    vi编辑器的使用
    数据对象映射模式
    shell脚本--逻辑判断与字符串比较
    shell脚本--分支、条件判断
    shell脚本--数值比较
    shell脚本--文件测试
    sublime text3修改默认配置文件是失败的解决方法
    shell脚本--显示文本内容
  • 原文地址:https://www.cnblogs.com/jie-fang/p/10279573.html
Copyright © 2011-2022 走看看