Ratchet 模态框的实现
导读:收集整理的这篇文章主要介绍了Ratchet 模态框的实现,觉得挺不错的,现在分享给大家,也给大家做个参考。 模态框在任何一个系统的布局里面都是很重要的东西。其实个人觉得直接一个alert( 更好,但现在很多人觉得alert( 的弹...
收集整理的这篇文章主要介绍了Ratchet 模态框的实现,觉得挺不错的,现在分享给大家,也给大家做个参考。 模态框在任何一个系统的布局里面都是很重要的东西。其实个人觉得直接一个alert()更好,但现在很多人觉得alert()的弹出框太不给力。同时alert()里面也不宜放置太多文本。如果需要做注册的“服务协议”等本页面内弹出窗口,此时可以考虑使用到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 模态框内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: Ratchet 模态框的实现
本文地址: https://pptw.com/jishu/586216.html