Как закрыть и открыть модальное как 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

Попробуйте следующий подход.

Удалить данные целевой = "# myModal" от кнопки

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

нажатия кнопок:

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