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. spring 4.0+quartz2.2 实现持久化

    最近在搭建框架 用到quartz持久化这块 查了一些文档  如下配置即可. 这里是quartz官方提供配置步骤 http://www.quartz-scheduler.org/ Quartz包含三个抽 ...

  2. VS2013相关

    A.安装VS2013的离线msdn帮助文档.原文地址:https://www.cnblogs.com/strangekitty/p/4707400.html 作为vs的初学者,安装帮助文档有利于快速掌 ...

  3. 将自己数据转化为cifar10支持的lmdb

    大家都知道,在caffe里面,要运行cifar10的例子就得先由cifar10的数据库.由于caffe为了提高运行效率,减少磁盘寻道时间等,统一了数据接口(lmdb,leveldb). 首先,看一下c ...

  4. Django学习---Web框架及基础知识

    Django学习---Web框架 web框架的本质 我们在学socket,我们创建一个socketserver,然后运行起来,有一个client客户端要连接socket服务端,连接上之后,如果两边都没 ...

  5. SDN openflow 学习小得

    一.openflow 大概的工作原理 SDN 的一个大概简陋图, 同网段通讯 1.我们传统网络 pc1 10.1.1.1 要找同一子网的 pc2 10.1.1.2  通过广播洪泛.找到pc2,然后转发 ...

  6. 使用AdBlock plus屏蔽广告

    使用前 使用后 定制规则 使用前 添加规则 id=1的为广告

  7. UNITY引擎变量调用产生不必要内存分配

    https://unity3d.com/de/learn/tutorials/topics/performance-optimization/optimizing-garbage-collection ...

  8. 数字1的ASCII值是多少

    ASCII表是计算机将字符转为数字存储的一张转换表.因此,只有字符才有ASCII值,数字是没有的. 答案:数字1没有ASCII值,数字1在计算机中就是按数值1存储的. 字符1的ASCII值是 49

  9. javax.persistence.TransactionRequiredException: No transactional EntityManager available

    在操作中加上@Transcational注解,一般是用于修改或者删除操作.

  10. django初体检课程

    最简便的Python web开发框架. C:\Windows\System32>E: E:\>django-admin startproject mysite E:\>cd mysi ...