popup 弹出层弹出窗口 包括图片组浏览,ajax载入,地图等
代码仅仅只显示一部分,更多内容请看演示页面
![popup 弹出层弹出窗口 包括图片组浏览,ajax载入,地图等 popup 弹出层弹出窗口 包括图片组浏览,ajax载入,地图等](http://www.freejs.net/demo/197/demo.jpg)
XML/HTML Code
- <a class="image-popup-vertical-fit" href="../dalian.jpg" title="Caption. Can be aligned it to any side."> <img src="../dalian.jpg" width="75" height="75"> </a> <a class="image-popup-fit-width" href="../dandong.png" title="This image fits only horizontally."> <img src="../dandong.png" width="75" height="75"> </a>
- <script>
- $(document).ready(function() {
- $('.image-popup-vertical-fit').magnificPopup({
- type: 'image',
- closeOnContentClick: true,
- mainClass: 'mfp-img-mobile',
- image: {
- verticalFit: true
- }
- });
- $('.image-popup-fit-width').magnificPopup({
- type: 'image',
- closeOnContentClick: true,
- image: {
- verticalFit: false
- }
- });
- $('.image-popup-no-margins').magnificPopup({
- type: 'image',
- closeOnContentClick: true,
- closeBtnInside: false,
- mainClass: 'mfp-no-margins', // class to remove default margin from left and right side
- image: {
- verticalFit: true
- }
- });
- });
- </script>
- <h2>Lightbox gallery</h2>
- <div class="popup-gallery"> <a href="../dalian.jpg" title="The Cleaner"><img src="../dalian.jpg" width="75" height="75"></a> <a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Winter Dance"><img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" width="75" height="75"></a> <a href="../demo1.jpg" title="The Uninvited Guest"><img src="../demo1.jpg" width="75" height="75"></a> <a href="../demo2.jpg" title="Oh no, not again!"><img src="../demo2.jpg" width="75" height="75"></a> </div>
- <script>
- $(document).ready(function() {
- $('.popup-gallery').magnificPopup({
- delegate: 'a',
- type: 'image',
- tLoading: 'Loading image #%curr%...',
- mainClass: 'mfp-img-mobile',
- gallery: {
- enabled: true,
- navigateByImgClick: true,
- preload: [0,1] // Will preload 0 - before current, and 1 after the current image
- },
- image: {
- tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
- titleSrc: function(item) {
- return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
- }
- }
- });
- });
- </script>
相关推荐
jquery.popup 弹出层选择 提示
popup 弹出框popup 弹出框popup 弹出框popup 弹出框popup 弹出框popup 弹出框popup 弹出框popup 弹出框popup 弹出框popup 弹出框
通用jQuery对话框dialog或popup弹出层或提示窗口插件
jQuery 通用dialog/popup弹出层,提示窗口插件,包括有弹出自定义的帮助窗口(根据位置自动判断在底部或头部弹出)、显示和隐藏Loading信息、显示自定义Loading信息、在指定容器内显示Loading信息、显示和隐藏Tip信息...
JQuery弹出层插件 PopupDiv-v1.0 通用自定义弹出层插件 by maxcoold 2009-2-29 bug 提交至:maxcoold@126.com --------------------------------------------- 功能说明: 本插件基于jquery 1.31下编写,请尽量在...
JQuery PopupDiv 弹出层插件 v1.0 JQuery PopupDiv 弹出层插件 v1.0
jQuery弹出层插件PopupDiv-v1.0下载
jQuery popup javascript 弹出窗口 可遮盖IE6的select 点击其它地方自动隐藏 兼容IE,FF等浏览器
实现弹出窗口与主界面的分离,只要点击弹出窗口的其他部分就可以关闭弹出窗口。
用jquery做弹出框popup时需要的参数的名称、类别、描述等
使用ArcGISAPI实现多个弹窗弹出;多个Popup窗体弹出,亲测可用。
jquery弹出层并可拖动,详细的介绍页面文件里面有,封装好的js,调用接口即可
ajax-Popup控件讲座
今天用pop的弹出窗口里,出现一个问题,当网页出现滚动条里,不能遮挡住,解决Pop遮罩层无法遮挡滚动条下问题。 pop滚动条遮挡
我就废话不多说了,大家还是直接看代码吧~ 选择日期 value=datetime click=showDatePicker> <van-popup v-model=showDatePicker position=bottom :style={ h
popup, MSN 风格的消息弹出窗口。很适合ASP.NET下使用。 用过的都知道。:-) 包括C#代码,和VB.net代码
内容索引:脚本资源,jQuery,提示框,弹出层 jQuery 通用dialog/popup弹出层,提示窗口插件,包括有弹出自定义的帮助窗口(根据位置自动判断在底部或头部弹出)、显示和隐藏Loading信息、显示自定义Loading信息、在...
八种JQuery弹出层效果,有简单有复杂总有一个适合你。 Jquery POPUP 弹出层
前端popup滑出层效果插件,使用方法请移步github:https://github.com/kalvinGit/kpopup
JS+CSS 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 本文将详细介绍使用 JS 和 CSS 实现遮罩居中弹出层,并且随浏览器窗口滚动条滚动。该弹出层能够在浏览器窗口中居中显示,且随着浏览器窗口的滚动而滚动。 ...