如何实现Ratchet模态框

tangjin

作者

这篇文章主要介绍如何实现Ratchet模态框，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

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

效果如下：

实现代码如下：

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<!--自适应手机屏幕-->
<metaname="viewport"content="initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<!--适应苹果手机-->
<metaname="apple-mobile-web-app-capable"content="yes">
<metaname="apple-mobile-web-app-status-bar-style"content="black">
<!--不要被百度转码-->
<metahttp-equiv="Cache-Control"content="no-siteapp"/>
<!--引入RatChet资源-->
<scripttype="text/javascript"src="js/ratchet.min.js"></script>
<linkhref="css/ratchet.min.css"rel="stylesheet"type="text/css">
<title>Modal</title>
</head>
<body>
<divclass="content">
<ahref="#Modalid"class="btnbtn-primarybtn-block">打开模态框</a>

<divid="Modalid"class="modal">
<headerclass="barbar-nav">
<aclass="iconicon-closepull-right"href="#Modalid"></a>
<h2class="title">模态框标题</h2>
</header>
<divclass="content">
<pclass="content-padded">模态框内容</p>
</div>
</div>
</div>
</body>
</html>

以上是“如何实现Ratchet模态框”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注恰卡编程网行业资讯频道！

阅读全文

发布于 2021-03-21 22:36:20

ratchet