Question

这是我的代码

<a href="#logout" data-toggle="modal" data-target="#logout"><i class="fa fa-sign-out"></i>&nbsp;Logout</a><!--link to the modal-->

这是模态

<!--the pop up box to look like this-->
<div class="modal fade" id="logout" role="dialog">
    <div class="modal-body">
     <div class="alert alert-error">Are you sure you want to Logout?</div>
    </div>
    <div class="modal-footer">
     <button class="btn" data-dismiss="modal" aria-hidden="true"><i class="fa   fa-remove"></i>&nbsp;NO</button>
     <a href="logout.php" class="btn btn-danger"><i class="fa fa-check">   </i>&nbsp;Yes</a>
    </div>
</div><!--end modal-->

Answer 1

Bootstrap CDN CSS

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

JS

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js

使用按钮
触发模态

 <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#logout">modal window</button>

模态

<div class="modal fade" id="logout" role="dialog">
    <div class="modal-body  modal-lg">
     <div class="alert alert-error">Are you sure you want to Logout?</div>
    </div>
    <div class="modal-footer">
     <button class="btn" data-dismiss="modal" aria-hidden="true"><i class="fa   fa-remove"></i>&nbsp;NO</button>
     <a href="logout.php" class="btn btn-danger"><i class="fa fa-check">   </i>&nbsp;Yes</a>
    </div>
</div>

javascript，如果想用javascript做更多更改。但没有它就可以工作。

 $(document).ready(function ()  
          {

              $('#modal_name').modal({
                  show: false,
                  backdrop: 'static',
                  keyboard: false
                });
          });

JS小提琴 Check this fiddle, It's Your Code

我想，您使用的是较低版本的jQuery，请使用此版本。它会工作jQuery CDN

Answer 2

您的脚本是否按此订购：

<!-- MAKE SURE JQUERY IS BEFORE BOOTSTRAP -->
<script src="/path/to/jquery/"></script>
<script src="/path/to/bootstrap/"></script>

bootstrap模态不起作用。我已经确定一切正常但仍无法正常工作

2 个答案: