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>
    
  • 相关阅读:
    for of 与 for in的区别
    Mac Item2 SSH免密登录Linux 服务器的两种方式
    组塞式,非阻塞式,同步异步
    Thrift_简介(基于C#)
    HTTP Error 500.22
    http协议
    IIS_部署出错
    JavaScript如何实现继承
    $(function(){})与 (function(){})() (function($){})() 的区别
    C#_反射机制
  • 原文地址:https://www.cnblogs.com/jie-fang/p/10279573.html
Copyright © 2011-2022 走看看