zurb foundation 4揭示模式改變data-reveal-id =「myModal」中的文字

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更改文本，以指示在關閉模式（即「隱藏模態」），但它沒有任何意義，因爲該模式可以通過關閉：

• 任何地方點擊頁面上，但該模式
• 點擊 「X」 鏈路上的模態

所以在模態之外的210元素在模態之外是無用的。

也許你指的是改變對模式本身的文本，再一次，因爲你已經可以設置它的文本爲「關閉模態」也沒用，像這樣：

<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(); 
    }, 
});