Question

嗨抱歉，如果这是一个愚蠢的问题我正在使用揭示和模态工作正常。
单击时显示“显示信息”文本正在运行。如何设置文本，以便在单击时更改为“隐藏信息”

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

Answer 1

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

你要做的事情没有意义。为什么，因为导致你的揭示出现的元素是“外部”的模态。否则，如果它在里面，那么你将无法通过该元素打开模态。基于该描述，您可以这样：

<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更改文本以指示关闭模式（即“隐藏模态”），但它没有意义，因为模式可以通过以下方式关闭：

点击页面上的任意位置但是模式
点击模态

因此，模态之外的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();
    },
});

zurb foundation 4显示模态更改数据中的文本显示-idid =“myModal”

1 个答案: