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实现自定义Tooltip边框涂鸦风格的教程
Nov 05 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
php你的验证码安全码?
2007/01/02 PHP
PHP执行速率优化技巧小结
2008/03/15 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
Js apply方法详解
2017/02/16 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
python机器学习之决策树分类详解
2017/12/20 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
大学生收银员求职信分享
2014/01/02 职场文书
个人委托书
2014/07/31 职场文书
男方婚礼答谢词
2015/01/20 职场文书
库房管理员岗位职责
2015/02/12 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
检讨书怎么写
2015/05/07 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
python编程项目中线上问题排查与解决
2021/11/01 Python
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫