Joomla JHtml Behavior.Modal将应用于滑动侧杆

Question

我发现了一个问题，一个模式弹出链接是在滑动边栏内不能正常工作，打开一个模式弹出框。滑动侧边栏只有在用户单击它时才会打开，并且其中将包含包含模式链接的内容。

我已经添加了

Jhtml::_('behavior.modal');

在代码的开头，但仍然不起作用。我的链接代码如下

<a class="modal" rel="{handler: 'iframe', size: {x: 750, y: 600}}" href="index.php">Click me</a>

基于此链接，它应该在正常情况下在模式弹出框中打开内容(在主页上，而不是在滑动侧边栏中)。然而，当它在滑动侧边栏时，它就不起作用了。

我想到的主要原因可能是因为滑动侧边栏是在站点加载后动态创建的，因此该链接将不会作为模式链接，而只是一个普通的href链接。

我在网上看到一个回复here，建议执行此操作

SqueezeBox.assign($$('a.modal'), {
parse: 'rel'
});

每次添加新元素时。但我不知道它是什么意思，也不知道如何执行它。

在座的各位有没有办法让滑动侧边栏模式链接正常工作？

Answer 1

最后，我自己找到了答案。对于在使用ajax或动态内容时遇到此问题的任何人，只需将以下代码添加到您的加载页面javascript即可

$('body').on('click', 'a.osmodal', function(event) {
event.preventDefault();
SqueezeBox.open($(this).attr('href'), {
handler: 'iframe',
size: {x: 900, y: 500}
});
});

这只是一个简单的贡献，希望有人会发现它是有用的。

Answer 2

我想回答你关于如何将Joomla的核心模态行为分配给动态生成的内容的问题，因为你们太接近了。在工作中，我们使用AJAX/惰性加载生成大量内容。

assign方法有两个参数。第一个指示要应用哪些DOM元素，下面我提供了按class或id赋值的示例。第二个是JSON对象选项，10个选项中有9个已经附加到锚元素的rel属性。

最后需要注意的是，此方法必须在将动态生成的HTML插入到DOM中之后运行。

使用类的

SqueezeBox.assign(
    $$('a.modal.unique-class-identifier'),
    $('a.modal.unique-class-identifier').attr('rel')
});

使用ID的

SqueezeBox.assign(
   'a.modal#unique-id-identifier',
    $('a.modal.unique-class-identifier').attr('rel')
});

希望这能有所帮助。

Answer 3

有同样的问题，我在Joomla页面加载后动态添加了一些链接。下面的代码片段在新添加的元素上添加了模式对话框的事件处理程序(确保在添加元素之后调用)：

<script>
SqueezeBox.assign(jQuery('a.modal'), {
parse: 'rel'
});
</script>

还要确保你已经加载了模式功能(例如)您的模板：

JHTML::_('behavior.modal');