Question

我尝试添加功能以关闭用户的模式。

我想添加一个用户可以单击以关闭它的框，以及在用户按下某个键时关闭它的方法。

当我在点击事件处理程序中添加简单警报时，它们会发出警报但不会关闭模式。

有人可以帮我吗？

提前致谢。

基金会的默认功能：

<script>
      $(document).foundation();
      $('a.custom-close-reveal-modal').click(function(){
      $('#myModal').foundation('reveal', 'close');
    });

我尝试添加以下内容：

1) $("#done").on("click",function()
    {
      $('.close-reveal-modal').trigger('click');
    });

2) $("#done").on("click",function()
    {
      $('#myModal').foundation('reveal', 'close');
    });

3) $(document).keypress(function(e) {
     if(e.which == 13) {
       $('a.custom-close-reveal-modal').trigger('click');
       // alert("hi");
     }

揭密模式框的HTML：

 <section id="myModal" class="reveal-modal" data-reveal>
   ....content  goes here.....

 <a class="close-reveal-modal">&#10003;</a>// default option to close

 <input type="button" name="done" class="submit done" value="Done" id="done"/>//another option I made
</section>

Answer 1

我刚遇到这个问题＆amp;只需编辑 foundation.css

即可解决此问题

触发关闭链接的类是

.close-reveal-modal

在foundation.css中，查找以下类：

.reveal-modal .close-reveal-modal {    
   //some css blocks
 }

现在删除里面的所有css块并创建另一个类，例如：

.reveal-modal .close-x-btn{
   //paste the css blocks here from the .close-reveal-modal
 }

整体而言，您的按钮应如下所示

<a class="button close-reveal-modal">Cancel</a>

至于＆＃34; x＆＃34;在模态的右上角

<a class="close-reveal-modal close-x-btn" aria-label="Close">&times;</a>

现在，您可以使用按钮和＆＃34; x＆＃34;来关闭模态。在右上角的同时还在保持＆＃34; x＆＃34;的原始风格链路

当按下另一个按钮或输入按键时，无法关闭基金会的显示模式

1 个答案: