Bootstrap Modal没有响应

Question

I am using a modal that I used from a previous site where it works fine. Difference is this modal will only appear in IE9 only to direct users to a better browser. I was able to test it with just a alert and works fine.

However, for some reason, when I transfer the code I did for a previous site to this new site, the Modal isn't responding and to one point is not showing on the site.

When I try close the "Close" button, it will just refresh the page. I am not sure why and when I close the "X" button, it does not work either.

The code is inserted in a coldfusion file and I am not sure if it causing conflict or not.

Any help would be appreciated.

Here is what I did for the modal. ie-only detects whether it is IE9 or not:

<!---<div class="ie-only" style="overflow-y:hidden;">
        <div class="modal fade in" id="myModal" aria-hidden="false" style="display:block; padding-right:17px;">
            <div class="modal-dialog modal-md custom-height-modal">
                <div class="modal-content">
                    <div class="modal-header" style="background-color:##428bca">
                        <button type="button" class="close" data-miss="modal">x</button>
                        <h3 class="modal-header" style="background-color:##428bca; text-align:center">Attention</h3>                        
                    </div><!---Modal-Header Div--->
                    <div class="modal-body">
                        <p style="text-align:center">You are using an outdated browser.<br /> <br /> <a href="http://browsehappy.com/">Upgrade your browser today</a> to better experience this site.</p>
                    </div><!---Modal-Body Div--->
                    <div class="modal-footer">
                        <p class="text-center"><a class="btn btn-default" data-dismiss="modal">Close</a></p>
                    </div><!---Modal-Footer Div--->
                </div><!---Modal-Content Div--->
            </div><!---Custom Height Div--->
        </div><!---Modal Fade in Div--->
    </div><!---Start of Modal Div--->               
    <!--End of Modal container--> --->
     <!---<script>
            $(function(){
                $('##myModal').modal('show');
            }
          </script>  
                <div class="modal-backdrop fade in"></div>--->

Answer 1

It looks like there is a syntax problem in your code:

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

This is incorrect; it should be:

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

When corrected the Modal loads as a Modal, which in turn causes the Close button to operate as expected. Absent this the modal still loads (because you have in activated) but loads absent the overlay and absent the hook to Bootstrap's Modal JS which explains why your close button is non-functional.

You can see a functional example here: http://www.bootply.com/24IPYP8O3F

Why your code isn't working

The in class on your Modal div instructs Bootstrap to make that modal visible, and position it according to the Bootstrap CSS. Your jQuery is wrong though, so Bootstrap treats this like a bit of HTML that is just part of the document.

Once you correct your jQuery Bootstrap processes it as expected; as a Modal Javascript component. Once that happens it is presented with the overlay (as default) and the data-dismiss attributes are processed correctly.

The short of it is that the entire issue for why your Modal is not behaving like a Modal is that your jQuery is wrong.