Ratchet 模态框的实现


Posted in HTML / CSS onAugust 19, 2020

模态框在任何一个系统的布局里面都是很重要的东西。其实个人觉得直接一个alert()更好,但现在很多人觉得alert()的弹出框太不给力。同时alert()里面也不宜放置太多文本。如果需要做注册的“服务协议”等本页面内弹出窗口,此时可以考虑使用到Ratchet的模态框。

效果如下:

Ratchet 模态框的实现

实现代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <!--自适应手机屏幕-->
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
        <!--适应苹果手机-->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!--不要被百度转码-->
        <meta http-equiv="Cache-Control" content="no-siteapp"/>
        <!--引入RatChet资源-->
        <script type="text/javascript" src="js/ratchet.min.js"></script>
  <link href="css/ratchet.min.css" rel="stylesheet" type="text/css" >
        <title>Modal</title>
    </head>
    <body>
        <div class="content">
            <a href="#Modalid" class="btn btn-primary btn-block">打开模态框</a>
                
            <div id="Modalid" class="modal">
                <header class="bar bar-nav">
                    <a class="icon icon-close pull-right" href="#Modalid"></a>
                    <h1 class="title">模态框标题</h1>
                </header>                
                <div class="content">
                 <p class="content-padded">模态框内容</p>
                </div>
            </div>
        </div>
    </body>
</html>

到此这篇关于Ratchet 模态框的实现的文章就介绍到这了,更多相关Ratchet 模态框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3教程:background-clip和background-origin
Oct 17 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 #HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 #HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 #HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 #HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 #HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 #HTML / CSS
amazeui时间组件的实现示例
Aug 18 #HTML / CSS
You might like
php抓取https的内容的代码
2010/04/06 PHP
php常用Stream函数集介绍
2013/06/24 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
asp.net和php的区别点总结
2019/10/10 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
详解vue高级特性
2020/06/09 Javascript
Python中的闭包详细介绍和实例
2014/11/21 Python
Python 硬币兑换问题
2019/07/29 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
python实现图片插入文字
2019/11/26 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
介绍一下Linux文件的记录形式
2012/04/18 面试题
英语专业毕业生自我鉴定
2013/11/09 职场文书
我的老师教学反思
2014/05/01 职场文书
学校开学标语
2014/10/06 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android