0

嗨对不起，如果这是一个无聊的问题。
我正在使用显示并且模态运行正常。
单击时显示文本“显示信息”有效。我将如何设置文本，以便在单击时更改为“隐藏信息”

function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("myModal");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "show";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "hide";
    }}

a> id="myModal" href="javascript:toggle();" data-reveal-id="myModal"> show /a
4

1 回答 1

0

我将如何设置文本，以便在单击时更改为“隐藏信息”

你试图做的事情没有意义。为什么，因为导致您的显示出现的元素是在模态的“外部”。否则，如果它在内部，那么您将无法通过该元素打开模式。根据该描述，您有以下内容：

<a href="#" data-reveal-id="myModal" id="modalTrigger">Open Modal</a>
<div id="myModal" class="reveal-modal">
    <h1>My modal</h1>
    <a class="close-reveal-modal">&#215;</a>
</div>

现在您希望modalTrigger更改文本以指示关闭模式（即“隐藏模式”），但这没有意义，因为模式可以通过以下方式关闭：

  • 单击页面上的任何位置，但模式除外
  • 单击模式上的“x”链接

因此，Hide Modal模态之外的元素在显示模态时是无用的。

也许您指的是更改模态本身的文本，但同样，它是无用的，因为您已经可以将其文本设置为“关闭模态”，如下所示：

<a href="#" data-reveal-id="myModal" id="modalTrigger">Open Modal</a>
<div id="myModal" class="reveal-modal">
    <h1>My modal</h1>
    <a class="close-reveal-modal">&#215;</a>
    // inline js to make a simple example
    <a class="button" 
      onclick="javascript:$('#myModal').foundation('reveal', 'close')">
      Close Me</a>
</div>

所以你看到你不需要改变任何东西来表明一个元素可以关闭模​​式。

如果您的问题是您想在打开模式后发生其他事情，那么这是可以实现的。一个很好的例子是，如果模态的内容来自数据库并且需要一些时间来加载，那么您在获取完成时显示一个图像加载器。然后，您希望该加载程序“仅在显示模式后关闭”。你可以这样做：

$(document).foundation('reveal', {
    opened: function () {        
        closeImageLoader();
    },
});
于 2013-05-03T04:26:46.027 回答