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选择器的研究(详解)
Sep 16 HTML / CSS
CSS3 倾斜的网页图片库实例教程
Nov 14 HTML / CSS
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
一个程序下载的管理程序(一)
2006/10/09 PHP
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
常用DOM整理
2015/06/16 Javascript
JavaScript中this详解
2015/09/01 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
python中 chr unichr ord函数的实例详解
2017/08/06 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
python模拟实现分发扑克牌
2020/04/22 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
C#面试题
2016/05/06 面试题
学生逃课检讨书
2015/02/17 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python