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

Question

I want to create a modal like Bootstrap ... I have wrote this codes :

<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>

But I have a problem in understanding how to close & open it. I put a data-target for button to match with Modal Box ID & I don't display the modal from the beginning ..., So I wrote this code but It doesn't work ...

$('.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

There a few mistakes with your code.

Mistake 1:

Here:

if('boxID' == 'modalBoxAttr')

You are currently checking the strings and not the objects . What you have written is the following:

If the string "boxId" is equal to the string "modalBoxAttr" do something. And both strings are not the same, so you get a false result.

Mistake 2:

You are complicating the code too much.

You can just simplify it like this.

 $('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> 

Use more often console.log() to debug your code and check if you are actually entering a specific section and if your logic is correct.

Answer 2

Try following approach.

Remove data-target="#myModal" from button

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

Button click:

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