适用于您的应用程序的模态和弹出窗口。 支持animate.css。
在页面中引入下面的文件。
1 2 3 | < link href = "css/animate.css" rel = "stylesheet" /> < script src = "js/jquery.min.js" type = "text/javascript" ></ script > < script src = "js/jquery.popup.js" ></ script > |
HTML结构
1 2 3 4 5 6 7 | < div id = "myModal" class = "myModal" > <!-- Modal Content Here --> < h3 >Modal Title</ h3 > < p >Modal Body</ p > <!-- Custom Close Button --> < b class = "myModal-close js-popup-close" >x</ b > </ div > |
CSS样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .myModal { max-width : 600px ; padding : 1em ; background : #eee ; display : none ; position : relative ; box-shadow: 0px 0px 15px 0px rgba( 0 , 0 , 0 , 0.15 ); } /*关闭按钮*/ .item-close { cursor : pointer ; right : 5px ; top : 5px ; position : absolute ; background : #222 ; color : #fff ; border-radius: 100% ; font-size : 14px ; height : 24px ; line-height : 22px ; text-align : center ; width : 24px ; } |
初始化插件
1 | $( '#elem' ).popup(); |
配置参数
特别申明:
本站所有资源都是由网友投稿发布,或转载各大下载站,请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:lei1294551502@163.com