zurb foundation 4揭示模态改变数据中的文本:reveal-id=" mymodal;

zurb foundation 4 reveal modal changing the text in the data-reveal-id="myModal"

本文关键字：reveal-id 文本 mymodal quot foundation 模态 数据 改变 zurb      更新时间：2023-09-26

你好，抱歉，如果这是一个愚蠢的问题。
我正在使用显示和模态工作良好。
文本"显示信息"点击时正在工作。我该如何设置文本，使其在点击时变为"隐藏信息"

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

我该如何设置文本，当点击它时，它会变成"隐藏信息"

你想做的事情没有意义。为什么，因为导致你的显示的元素是"在"模态之外。否则，如果它在内部，那么你将无法通过该元素打开模态。基于该描述，您可以得到如下内容:

<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();
    },
});
相关文章：