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实现轮播图效果实例
May 04 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
css3实现小箭头各种图形效果
Jul 08 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
css样式important规则的正确使用方式
Jun 10 HTML / CSS
html解决浏览器记住密码输入框的问题
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
谈谈PHP语法(4)
2006/10/09 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
Python装饰器基础详解
2016/03/09 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
简单了解Django项目应用创建过程
2020/07/06 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
python各种excel写入方式的速度对比
2020/11/10 Python
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
通信工程毕业生自荐信
2013/11/01 职场文书
假期安全教育广播稿
2014/10/04 职场文书
新党章的学习心得体会
2014/11/07 职场文书
外科护士长工作总结
2015/08/12 职场文书
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL