简单对话框

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>进度条</title><link rel="stylesheet" href="semantic-ui/semantic.min.css"><script type="text/javascript" src="js/jquery3.3.1.js"></script><script type="text/javascript" src="semantic-ui/semantic.min.js"></script></head><body><div class="ui container"><img src="imgs/lyl.jpg" class="ui centered image big"><div class="ui small basic modal"><div class="header title">确定删除吗？</div><div class="content">删除类型的同时会删除相关的所有文章，确定删除码？</div><div class="actions"><button class="ui negative button">否</button><button class="ui positive button">是</button></div></div></div><script>$(".ui.basic.modal").modal("show");</script></body>
</html>

效果：

对话框事件回调

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>进度条</title><link rel="stylesheet" href="semantic-ui/semantic.min.css"><script type="text/javascript" src="js/jquery3.3.1.js"></script><script type="text/javascript" src="semantic-ui/semantic.min.js"></script></head><body><div class="ui container"><div class="ui modal"><div class="header title">确定删除吗？</div><div class="content">删除类型的同时会删除相关的所有文章，确定删除码？</div><div class="actions"><button class="ui negative button">否</button><button class="ui positive button">是</button></div></div></div><script>$(".ui.modal").modal({ //各种回调方法onShow: function () {console.log("正在显示");},onVisible: function () {console.log("完全显示");},onHide: function () {console.log("开始隐藏");},onHidden: function () {console.log("完全隐藏");},onApprove:function () { //单击确认按钮console.log("确认")},onDeny:function () {  //单击取消按钮console.log("拒绝")}}).modal("show");</script></body>
</html>

效果：

单击是按钮：

单击否按钮：

综合示例

单击第一个对话框中的是按钮，打开第二个对话框

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>进度条</title><link rel="stylesheet" href="semantic-ui/semantic.min.css"><script type="text/javascript" src="js/jquery3.3.1.js"></script><script type="text/javascript" src="semantic-ui/semantic.min.js"></script></head><body><div class="ui container"><div class="ui modal first"><div class="header title">确定删除吗？</div><div class="content">删除类型的同时会删除相关的所有文章，确定删除码？</div><div class="actions"><button class="ui negative button">否</button><button class="ui positive button">是</button></div></div></div><div class="ui modal second"><div class="ui header title">正在删除</div><div class="ui progress"> <!--此处直接使用 data-percent="32"没有效果--><div class="bar"></div></div></div><script type="text/javascript">//通过JavaScript设置进度值$(".ui.progress").progress({percent: 70});</script><script>$(".first").modal({blurring: true,inverted: true}).modal("show");$(".second").modal(   //在第二个按钮上添加事件"attach events",".first .positive.button","show");</script></body>
</html>

效果：

Semantic UI 之对话框 modal相关推荐

semantic ui html5,css中什么是Semantic UI框架？
什么是Semantic UI框架? Semantic UI是一个用户友好度爆表的响应式前端框架,具备3000多个主题变量和50多个UI组件,可以快速搭建漂亮的网页.Semantic UI还集成了许多第 ...
php ci框架后台管理,ci: 羽翼后台管理平台是一个简单的博客系统，后端基于CodeIgniter，前端基于Semantic UI 2.2.10...
羽翼后台管理平台(博客系统) 羽翼的由来羽翼的故事是9月20日的晚上,我突然就想到--造翼者小说.我通过自己构思不少的东西.羽毛代表着轻松.纯洁和神圣的:翼代表着升天和梦想,两者在一起的含义:带着一 ...
Semantic UI 之图标 icon
第一步:创建项目添加JQuery和Semantic UI包.创建icon.html页面: 第二步:icon.html页面 <!DOCTYPE html> <html lang=&q ...
semantic ui html5,Semantic UI ：安装 Semantic UI
对 Semantic UI 有兴趣可以参考宁皓网的 Semantic UI 课程包,订阅宁皓网就可以学习全部课程了. Semantic UI 是一套开源的 CSS 与 JavaScript 框架,提供 ...
Semantic UI入门
安装Semantic UI semantic UI可以有两种方式安装: 直接下载压缩包,解压后调用就可以使用了用gulp进行安装用gulp安装的优点是可以自己修改sementic ui中的样式,这 ...
semantic.css,CSS框架：Semantic UI的优缺点
Semantic UI 作为一名全栈开发人员,Jack Lukic使用自然语言原理创建了Semantic UI框架.凭借着jQuery和LESS功能,Semantic UI提供了光滑.平整且精细的外观 ...
Semantic Ui 之容器 container
第一步:创建项目添加JQuery和Semantic UI包.创建container.html页面: 第二步:container.html页面 <!DOCTYPE html> <ht ...
Semantic UI术语
Semantic UI 的特定术语术语类型一.组件类型 (Types of Components) 二.工程术语 (Project Terminology) 三.定义术语 (Definition ...
Semantic UI入门示例
1.下载Semantic UI包引入相关文件遇到各种各样的问题,比如icon找不到.无动效等问题,所以通过链接的方式引入文件. 2.在页面引入文件(按照顺序) 引入文件内容如下: <li ...

Semantic UI 之对话框 modal

简单对话框

对话框事件回调

综合示例

Semantic UI 之对话框 modal相关推荐

最新文章

热门文章

Semantic UI 之 对话框 modal

简单对话框

对话框事件回调

综合示例

Semantic UI 之 对话框 modal相关推荐

最新文章

热门文章

Semantic UI 之对话框 modal

Semantic UI 之对话框 modal相关推荐