bootstrap模态保持打开

Question

我在bootstrap中遇到了一些模态窗口的问题。

我有一个按钮，当我点击它时，它会显示一个模态窗口，但是当我点击关闭按钮时，它会立即关闭并立即再次打开，我无法关闭它！

这是代码：

HTML

<a href="">
        <span class="chatButtonDetails">
          <span class="icon-iconOnlyChat"></span>
          Chat now
         <div id="chatModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Chat Now</h4>
            </div>
            <div class="modal-body">
                <p>chat chat chat</p>  
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
        </span>
      </a>

JS

$(document).ready(function(){
        $('.chatButtonDetails').click(function() {
         $("#chatModal").modal('show');
         return false;
        });
    });

提前谢谢!!

Answer 1

Model is always outside of all content - 这是引导程序约定。 请像这样更改你的HTML，它应该有效，

<a href="">
        <span class="chatButtonDetails">
          <span class="icon-iconOnlyChat"></span>
          Chat now

        </span>
      </a>
         <div id="chatModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Chat Now</h4>
            </div>
            <div class="modal-body">
                <p>chat chat chat</p>  
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Answer 2

你的问题是你在你用来打开的span元素中有你的模态。

像这样关闭你的span元素，让你的模态在它之外，它会起作用。

    <span class="chatButtonDetails">
          <span class="icon-iconOnlyChat"></span>
          <a href="#">Chat now</a>
         </span> 


<div id="chatModal" class="modal fade" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Chat Now</h4>
            </div>
            <div class="modal-body">
                <p>chat chat chat</p>  
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal" >Close</button>
            </div>
        </div>
    </div>
</div>

Answer 3

</a>关闭之前<div id="chatModal" class="modal fade">

Working Fiddle