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>

16、Semantic-UI之模态窗口的更多相关文章

  1. Qt 之 模态、非模态、半模态窗口的介绍及 实现QDialog的exec()方法

    一.简述 先简单介绍一下模态与非模态对话框. 模态对话框 简单一点讲就是在弹出模态对话框时,除了该对话框整个应用程序窗口都无法接受用户响应,处于等待状态,直到模态对话框被关闭.这时一般需要点击对话框中 ...

  2. 模态窗口原理及注意事项--http://www.alisdn.com/wordpress/?p=53

    前言 在开发Windows引用程序的时候,在一些需要用户确认,或者提示用户注意的场合,经常使用模态对话框,或者叫模态窗口.在绝大多数情况下,模态窗口给开发人员带来了极大的便利,并且在某些应用上有不可替 ...

  3. Semantic UI 语义化设计的前端框架

    UI是Web的灵魂!Semantic UI是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架. 特性 弃用有歧义的表述 Semantic是围绕自然交流语言而架构的,这使得开发更加直观(易 ...

  4. 15款最好的 jQuery Modal（模态窗口）插件

    jQuery 模态窗口插件帮助网站开发人员显示网页中的特定内容,让用户聚焦到这个地方.模态窗口是嵌入到当前网页中,不用重定向到新网页的弹出窗口.这种技术可以用在图像画廊,电子商务网站,登陆框,电子邮件 ...

  5. 十、ios 模态窗口［实例］

    一.模态窗口概念 对话框一般分为两种类型:模态类型( modal )与非模态类型( modeless ).所谓模态对话框,就是指除非采取有效的关闭手段,用户的鼠标焦点或者输入光标将一直停留在其上的对话 ...

  6. 第16讲- UI组件之TextView

    第16讲 UI组件之TextView Android系统所有UI类都是建立在View和ViewGroup这两类的基础上的. 所有View的子类称为widget:所有ViewGroup的子类称为Layo ...

  7. 使用jQuery创建模态窗口登陆效果

    日期:2013-8-22  来源:GBin1.com 隐藏模态窗口技术是一种很好的解决方案,用于处理不是特有必要出现在网页上的界面元素.社交网络可以使用模态窗口传达私人讯息以及只针对会员才能看 到的表 ...

  8. semantic-ui 模态窗口

    模态窗口即加了ui modal的class的div而已,会有点像是alert弹出框的形式,但是美观一点点.

  9. semantic ui框架学习笔记一

    面包屑导航 面包屑导航经常用于多个栏目下的内容管理,是web页面里比较常用的组合.例如: <div class="ui breadcrumb"> <a class ...

随机推荐

  1. Python,OpenGL生命游戏

    初学Python和OpenGL,练手的第一个小程序life.py,这个小程序在日后会不断调整,增加类.优化判断及操作 执行效果: 按正规生命游戏的规则: 1.周围生命等于3时产生生命 2.周围生命等于 ...

  2. Variant

    class RTL_DELPHIRETURN Variant: public TVarData Variant转换为字符串 System::Variants::VarToStr VariantArra ...

  3. struts.xml配置文件（package，namespace，action）

    struts2.0 xml配置 struts.xml文件结构 struts.xml文件是整个Struts2框架的核心. struts.xml文件内定义了Struts2的系列Action,定义Actio ...

  4. onlevelwasloaded的调用时机

    并不是任何场景加载完成后都会触发该事件,必须使用场景加载API才能触发onlevelwasloaded函数,场景加载API如 scenemanager.loadscene等,additive模式不触发 ...

  5. UNITY Destroy()和DestroyImadiate()都不会立即释放对象内存

    如题,destroyimadiate是立即将物体从场景hierachy中移除,并标记为 "null",注意 是带引号的null.这是UNITY内部的一个处理技巧.关于这个技巧有很争 ...

  6. java算法 第七届 蓝桥杯B组（题+答案） 9.取球博弈

    9.取球博弈  (程序设计) 两个人玩取球的游戏.一共有N个球,每人轮流取球,每次可取集合{n1,n2,n3}中的任何一个数目.如果无法继续取球,则游戏结束.此时,持有奇数个球的一方获胜.如果两人都是 ...

  7. 高性能Web服务器Nginx的配置与部署研究（16）小议location匹配模式优先级

    1 location 的匹配符 1.1 等于匹配符:= 等于匹配符就是等号,特点可以概括为两点: 精确匹配 不支持正则表达式 1.2 空匹配符 空匹配符的特点是: 匹配以指定模式开始的 URI 不支持 ...

  8. 104. Maximum Depth of Binary Tree (Tree; DFS)

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  9. js-textarea文本换行符处理，Java后端以及js前端如何处理

    方法一:后台处理 TextArea的换行符处理 TextArea文本转换为Html:写入数据库时使用 js获取了textArea的文本内容之后,器内容含有换行,空格,制表符之类的字符,但是js字符串不 ...

  10. 由Strurts2漏洞引开谈谈web代码安全问题

    漏洞与补丁齐飞,蓝屏共死机一色. 最近struts2的安全漏洞影响面甚广,此后门为可以在url中直接远程调用脚本的漏洞和一个重定向漏洞.大家可以在s2-016远程执行脚本漏洞和s2-017重定向开放漏 ...