本文主要介绍了棘轮模态盒的实现,通过实例代码详细介绍,对大家的学习或工作有一定的参考学习价值。有需要的朋友可以和边肖一起学习
模态框在任何系统的布局中都是非常重要的。其实个人觉得还是直接发个alert()比较好,只是现在很多人觉得alert()的弹出框太弱了。同时,不应在alert()中放置过多的文本。如果注册的“服务协议”等弹出窗口出现在此页面,此时可以考虑使用棘轮的模态框。
效果如下:
实现代码如下:
!' DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN '
http://www.w3.org/TR/html4/strict.dt
超文本标记语言
头
meta http-equiv=' Content-Type ' Content=' text/html;charset=utf-8 '
!-自适应手机屏幕-
meta name=' viewport ' content=' initial-scale=1,maximum-scale=1,user-scalable=no,minimum-ui '
!-适应苹果手机-
meta name=' apple-mobile-web-app-ability ' content=' yes '
meta name=' apple-mobile-web-app-status-bar-style ' content=' black '
!-不要被百度转码-
meta http-equiv='Cache-Control '内容='no-siteapp'/
!-引入棘轮资源-
script type=' text/JavaScript ' src=' js/ratchet . min . js '/script
link href=' CSS/ratchet . min . CSS ' rel='样式表' type='text/css '
标题模式/标题
/head
身体
div class='content '
a href=' # modal id ' class=' btnbtn-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='内容填充'模式框内容/p
/div
/div
/div
/body
/html
本文介绍了棘轮模式盒的实现。更多相关棘轮模态盒内容,请搜索Script House之前的文章或者继续浏览下面的相关文章。希望大家以后多多支持脚本屋!