使用按钮关闭模式

Question

我试图在模式中使用关闭模式按钮，但不起作用。

我的代码：

<center><button class="bleu b_modal">Modal test</button></center> 

<script type="text/javascript"> 

    $(".b_modal").click(function(e) { 
     e.preventDefault(); 
     modal.open({content: '\ 
      <center><button class="b_close">Close modal</button></center>\ 
     '}); 
    }); 

    $('.b_close').click(function(e){ 
     e.preventDefault(); 
     modal.close(); 
    }); 

    var modal = (function(){ 
     var 
     method = {}, 
     $modal, 
     $content, 
     $close; 

     method.open = function(settings) { 
      $content.empty().append(settings.content); 
      $modal.show(); 
      document.body.style.overflow = "hidden"; 
     }; 

     method.close = function() { 
      $modal.hide(); 
      $content.empty(); 
      document.body.style.overflow = "auto"; 
     }; 

     $modal = $('<div id="modal"></div>'); 
     $content = $('<div id="modal_content"></div>'); 
     $close = $('\ 
      <center><button class="b_close">Close modal</button></center>\ 
     '); 

     $modal.hide(); 
     $modal.append($content, $close); 

     $(document).ready(function(){ 
      $('body').append($modal); 
     }); 

     $close.click(function(e){ 
      e.preventDefault(); 
      method.close(); 
     }); 

     return method; 
    }()); 

</script> 

关闭按钮的模式不工作，但第二个关闭了模态工作。问题出在我的$('.b_close').click，但我没有尝试过。

modal.open({content: '\ 
      <center><button class="b_close">Close modal</button></center>\ 
     '}); 

Answer 1

这些行似乎是你的问题：

modal.open({content: '\<center><button class="b_close">Close modal</button></center>\'}); 
$close = $('\<center><button class="b_close">Close modal</button></center>\'); 

卸下中心的标签，他们不是在HTML5支持。另外，删除反斜杠（\）。最后一个实际上是逃避'否则将终止你的字符串。

$close = $('<button class="b_close">Close modal</button>'); 

而且我建议不要将按钮传递给.open（）方法。就这样称呼它：

modal.open(); 

然后在函数中使用var $ close。

var $close = $('<button class="b_close">Close modal</button>'); 

    method.open = function() { 
     $content.append($close); 
     $modal.show(); 
     document.body.style.overflow = "hidden"; 
    }; 

最后，您不需要在.open（）和.close（）方法的内容中调用.empty（）。

我做了一些修改自己的代码，这里有一个工作的jsfiddle：https://jsfiddle.net/0nxv597a/2/