使用fancybox在模态窗口中加载特定的div

2023-01-27前端开发问题
5

本文介绍了使用fancybox在模态窗口中加载特定的div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我正在使用fancybox 2.我已经设法通过AJAX 在fancybox 中加载内容.但它会加载整个页面,我只对特定的 div 感兴趣.在 fancybox 1 中,我们可以通过在 ajax 中添加过滤器来做到这一点.但我不确定如何在fancybox 2 中进行过滤.

I am using fancybox 2. I have manage to load content in fancybox via AJAX. But it loads the whole page and I am only interested in specific div. In fancybox 1 we could do that by adding filter in ajax. But I am not sure how to filter in fancybox 2.

如何在fancybox 2 中从AJAX 加载页面中过滤特定的div?

How to filter specific div from AJAX loaded page in fancybox 2?

    $(".fancybox").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        type        : 'ajax',
        'ajax'      : {
            dataFilter: function(data) {
            return $(data).find('#modalArticleContainer')[0];
        }
    });

Untile ajax 它可以工作但会加载整个页面,当我添加过滤器时它会停止工作.这就是我之前在 fancybox 1 中所做的.

Untile ajax it works but loads whole page, when I add filter then it stops working. This is how I did previously in fancybox 1.

推荐答案

如果你使用的是最新的(https://github.com/fancyapps/fancyBox/zipball/master),那么有一个技巧可以加载特定元素来自 ajax 响应 -

If you are using the latest (https://github.com/fancyapps/fancyBox/zipball/master), then there is a trick to load specific element from the ajax response -

<a href="mypage.html #my_id" class="fancybox fancybox.ajax">Load ajax</a>

$(".fancybox").fancybox();

这篇关于使用fancybox在模态窗口中加载特定的div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

ajax请求获取json数据并处理的实例代码
ajax请求获取json数据并处理的实例代码 $.ajax({ type: 'GET', url: 'https://localhost:44369/UserInfo/EditUserJson',//请求数据 data: json,//传递数据 //dataType:'json/text',//预计服务器返回的类型 timeout: 3000,//请求超时的时间 //回调函数传参 suc...
2024-11-22 前端开发问题
215

layui 单选框、复选框、下拉菜单不显示问题如何解决?
1. 如果是ajax嵌套了 页面, 请确保 只有最外层的页面引入了layui.css 和 layui.js ,内层页面 切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...
2024-11-09 前端开发问题
313

layui中表单会自动刷新的问题
layui中表单会自动刷新的问题,因为用到layui的表单,遇到了刷新的问题所以记录一下: script layui.use(['jquery','form','layer'], function(){ var $ = layui.jquery, layer=layui.layer, form = layui.form; form.on('submit(tijiao)', function(data){ a...
2024-10-23 前端开发问题
262

jQuery怎么动态向页面添加代码?
append() 方法在被选元素的结尾(仍然在内部)插入指定内容。 语法: $(selector).append( content ) var creatPrintList = function(data){ var innerHtml = ""; for(var i =0;i data.length;i++){ innerHtml +="li class='contentLi'"; innerHtml +="a href...
2024-10-18 前端开发问题
125

Rails 3.1 ajax:成功处理
Rails 3.1 ajax:success handling(Rails 3.1 ajax:成功处理)...
2024-04-20 前端开发问题
11

ExecJS::ProgramError: SyntaxError: 保留字“function"
ExecJS::ProgramError: SyntaxError: Reserved word quot;functionquot;(ExecJS::ProgramError: SyntaxError: 保留字“function)...
2024-04-20 前端开发问题
13