如何关闭和打开像Bootstrap这样的模态

Question

我想创建一个类似Bootstrap的模态...我写了这段代码：

<button type="button" data-target="#myModal" class="btn btn-primary">Open Modal</button>

<div class="modal fadeIn" id="myModal">
    <div class="modal-header">
        Roj Framework <span class="close-btn">&times;</span>
    </div>
    <div class="modal-content">
        Hi, This Roj Framework !
    </div>
    <div class="modal-footer">
        Continue ...
    </div>
</div>

但是我在理解如何关闭和打开它时遇到了问题。 我把按钮的数据目标与Modal Box ID匹配，我从一开始就不显示模态...，所以我写了这段代码，但它不起作用......

$('.modal').css('display', 'none');

$('button').click(function(){
    var boxID = $(this).data('target');
    var modalBox = $('.modal');
    var modalBoxAttr = modalBox.attr('id');
    if('boxID' == 'modalBoxAttr') {
        modalBox.css('display', 'block');
    }
});

Answer 1

你的代码有一些错误。

错误1：

这里：

if('boxID' == 'modalBoxAttr')

您当前正在检查strings而不是objects 。 你写的是以下内容：

如果字符串“boxId”等于字符串“modalBoxAttr”做某事。 两个字符串都不一样，所以你得到一个false结果。

错误2：

你太复杂了代码。

你可以像这样简化它。

 $('button').click(function(){ var boxID = $(this).data('target'); var boxObject = $(boxID); if(boxObject.length) { boxObject.toggle(); } }); 

 .modal { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" data-target="#myModal" class="btn btn-primary">Open Modal</button> <div class="modal fadeIn" id="myModal"> <div class="modal-header"> Roj Framework <span class="close-btn">&times;</span> </div> <div class="modal-content"> Hi, This Roj Framework ! </div> <div class="modal-footer"> Continue ... </div> </div> 

通常使用console.log()来调试代码并检查您是否实际输入了特定部分以及逻辑是否正确。

Answer 2

尝试以下方法。

从按钮中删除data-target =“＃myModal”

  <button type="button"  class="btn btn-primary">Open Modal</button>

按钮点击：

$('button').click(function(){
 $("#myModal").modal('show');
}});