Question

升级到bootstrap 3.3.7之后，我的模态中只有一件作品..其余的仅显示背景..

我尝试使用模式示例只是为了检查问题是否出在我的模式代码中..但仍然只显示背景信息。

如果我使用此javascript触发了模态工作，那会是什么奇怪的事情。

<script>
$('.myModal').on('click',function(){
$('.modal-body').load('content.html',function(){
    $('#myModal').modal({show:true});
    });
});
</script>

我的文件

index.php

<?php 
 ob_start();
include('dbcon.php'); 
include('header.php'); 
?>


 <body>

<nav class="navbar navbar-inverse navbar-fixed-top">
   <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data- 
 toggle="collapse" data-target="#navbar" aria-expanded="false" aria- 
 controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"></a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="index.php">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="contact.php">Contact</a></li>
    <li class="dropdown">
     <a href="#" class="dropdown-toggle" data- 
     toggle="dropdown">&nbsp;Login
      <b class="caret"></b></a>

        <ul class="dropdown-menu">

            <li><a href="#student" data-toggle="modal">Student</a></li>
            <li><a href="#peer" data-toggle="modal">Teacher</a></li>

        </ul>
        </li> 
        <li class="active"><a  href="#myModal" data-toggle="modal">&nbsp;Logout</a></li>
          </ul>
        </li>
      </ul>
    </div>
    </div>
</nav>




<?php include ('modal_student.php'); ?>
<?php include ('modal_peer.php'); ?>
<?php include ('modal.php'); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/
 jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="js/bootstrap.min.js"></script>

 </body></html>

modal_student.php

<div class="modal fade" id="student" tabindex="-1" role="dialog" aria- 
    labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
         <div class="alert alert-info">
      <button type="button" class="close" data-dismiss="alert">&times; 
          </button>

      <strong>Log in</strong> Please fill in the details below...
    </div>
    </div>
    <form class="form-horizontal" method="post" style="margin-left: 54px;">
    <div class="form-group">
          <label class="control-label" for="inputEmail">LRN</label>
            <div class="controls"> <input name="lrn_number" 
     id="inputEmail" placeholder=" Input your 11 digit LRN" required />
       </div>
          </div>
     <div class="form-group">
       <div class="controls">
         <button type="submit" name="login" class="btn btn-info"><i 
         class="icon-signin icon-large"></i>&nbsp;Sign in</button>
    </div>
    </div>      
    </form>
    <div class="modal-footer">
     <button class="btn" data-dismiss="modal" aria-hidden="true"><i 
     class="icon-remove icon-large"></i>close</button>
      </div>
    </div>

Modal.php

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- 
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">
<p><div class="alert alert-danger">Are you Sure you want logout?</p>
</div>
<hr>
<div class="modal-footer">
<button class="btn btn-inverse" data-dismiss="modal" aria-hidden="true"><i 
class="icon-remove icon-large"></i> No</button>
<a href="logout.php" class="btn btn-primary"><i class="icon-ok icon-large"> 
  </i> Yes</a>
       </div>
</div>

Answer 1

我猜你已经看过这个了吗？

https://getbootstrap.com/docs/3.3/javascript/#modals。

还要在您的标签中确保cmd.StandardInput.WriteLine("/C reg delete "HKEY_CURRENT_USER\Software\Epic Games\Unreal Engine\Identifiers" /f");在bootstrap.js之前

Bootstrap 3：只有一种模式工作

1 个答案: