Question

我正在使用Joomla 1.5.22和Mootools 1.1。我有一个模块，其中包含一个隐藏的div中的表单，我想在Joomla的内置模式框中打开它。我遇到的问题是，当我单击链接时，表单会在模式框中打开，但它也会在页面上的模块中打开div。

HTML：

<div id="moduleBox">
    <div id="clickMeButton"><a id="formClick" class="modal" href="#hiddenForm">Click me</a></div>
    <div id="hiddenForm">
     form code goes here
    </div>
</div>

使用Javascript：

window.addEvent('domready', function() {
  $('formClick').addEvent('click', function(){
    $('hiddenForm').setStyle('display','block');
  });
});

那么如何让表单只显示在模态框中？

你可以在这里看到我在说什么 - http://www.internextion.com/

这是回叫模块。我已经添加了处理程序：'采用'，如下所示，现在结果有点不同了。目标div仍显示在链接下方，但现在模态窗口包含链接而不是目标。

Answer 1

我认为这使用了Harald的SqueezeBox - 在这种情况下，您正在考虑以下场景：

找到目标div并将其CLONE插入到模态框中。
找到目标div并将其ADOPT到模态框中。

您正在查看第一个（默认）案例。要实现第二个效果，请添加：

handler: 'adopt'

到实例化选项。更多信息：http://digitarald.de/project/squeezebox/1-1/showcase/get-elements/

Answer 2

选项1：

如果你看一下覆盖div的html代码（在firebug中），你会发现它是html的“副本”，并且在覆盖容器中放置了id="sbox-content"。从理论上讲，如果你添加一个类似于+/-的CSS，它将隐藏链接并显示其他所有内容。这可能是最简单，最简单的解决方案。

div#sbox-content > a#formClick{
   display: none;
}

选项2：

如果选项1由于某种原因不起作用，您可以尝试使用CSS并在模态框打开时隐藏链接，然后在关闭时使其可见。

修改JS以添加类而不是修改样式。

window.addEvent('domready', function() {
  $('formClick').addEvent('click', function(){
    $('formClick').addClass('hidden');
    $('hiddenForm').setStyle('display','block'); 
  });
});

加载额外的CSS，使链接不可见

div#clickMeButton.hidden {
    display: none;
}

然后你必须重载关闭事件并使链接可见......

Answer 3

好的，所以我终于让它与其他答案的组合工作。首先，我删除了javascript点击事件以使表单显示，这解决了链接下方显示的表单问题。接下来，我在模态框中为hiddenForm ID添加了新的CSS，并将其设置为display：block。看来默认的处理程序行为（至少在Joomla中）是采用内容，因为我删除了handler: 'adopt'并且它仍在采用内容。

我知道这很简单，谢谢你的帮助！

BTW - 链接仍然有效，您可以在演示站点上看到正确的行为。现在，我需要做的就是添加一些精美的AJAX表单提交，它将在黄金时间准备就绪。

使用Joomla 1.5中的Mootools在灯箱中打开隐藏的div

3 个答案:

选项1：

选项2：