Modal
- 格式:ppt
- 大小:1.18 MB
- 文档页数:22


Bootstrapmodal常⽤参数、⽅法和事件Bootstrap modal(模态窗)常⽤参数、⽅法和事件:参数:名称类型默认值描述Backdrop Boolean或字符串“static”True True:有背景,点击modal外部,modal消失。
False:⽆背景,点击modal外部,modal不消失。
Static:有背景,点击modal外部,modal不消失。
Keyboard Boolean True True:键盘上的esc按下关闭modalFalse:键盘上的esc按下不关闭modal Show Boolean True True:显⽰modalFalse:不显⽰modal⽅法:.modal(options)将页⾯中的某内容作为模态窗激活。
接受可选的参数object;$(“#myModal”).modal();默认⽆参数$(“#myModal”).modal({keyboard:false}).modal(“toggle”)⼿动打开或关闭模态窗。
$(“#myModal”).modal(“toggle”).modal(“show”)⼿动打开模态窗$(“myModal”).modal(“show”);.modal(“hide”)⼿动关闭模态窗$(“myModal”).modal(“hide”);事件:事件类型描述Show.bs.modal Show⽅法调⽤之后⽴即出发该事件,如果是通过点击某个作为触发器的元素,则此元素可以通过事件的realatedTarget属性进⾏访问。
Shown.bs.modal此事件在模态窗已经显⽰出来(并且同事在css过度效果完成)之后出发,如果通过点击某个作为触发器的元素,则此元素可以通过事件的relatedTarget属性进⾏访问。
Hide.bs.modal Hide⽅法调⽤之后⽴即出发该事件Hidden.bs.modal此事件在模态窗被隐藏(并且同时在css过渡效果完成)之后出发Loaded.bs.modal从远端的数据源加载完数据之后出发该事件事件调⽤⽰例:$(“#myModal”).on(“show.bs.modal”,function(e){ //do something ……});。
本文实例讲述了Joomla实现组件中弹出一个模式(modal)窗口的方法。
分享给大家供大家参考,具体如下:最关键的JS在/media/system/js/modal.js 。
有以下两种方式都可以实现,修改的都是扩展组件的模板文件default.php.方式一:<?php JHTML::_('behavior.modal', 'a.modal');?><a rel="{handler: 'iframe', size: {x: 570, y: 400}}" href="/index.php" class="modal">view</a>就这么简单就可以实现了,其余的东西joomla!全部帮你处理了。
高兴吧!方式二:<script src="/media/system/js/modal.js"></script><link rel="stylesheet" href="/media/system/css/modal.css" type="text/css" /><a id="aatest" onclick="f()">view</a><script> function f() { SqueezeBox.fromElement(null, {handler: 'iframe', size: {x: 570, y: 400}, href:'/index.php'});};</script>一般还是使用第一种好了,如果你要研究modal.js到底怎么实现的,第二种方式使一个入门的例子。