Modal变暗，没有任何可点击的东西

时间：2017-12-04 18:16:49

标签： twitter-bootstrap bootstrap-modal bootstrap-4

我试图在单击按钮时打开Bootstrap模式，它会打开，但包含模态的整个屏幕变暗，我无法点击它上面的任何按钮。知道我做错了什么吗？我正在使用Bootstrap 4 beta 2

＆＃13;
＆＃13; 
    <html>
    <head th:fragment="head">
    <meta charset="utf-8" />
    <meta name="viewport"
    	content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    
    <title>My site</title>
    
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet"
    	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
    	integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
    	crossorigin="anonymous" />
    
    <script>
    	$('#myModal').on('shown.bs.modal', function() {
    		$('#myInput').focus()
    	})
    </script>
    </head>
    <body>
    
    	<!-- Navigation -->
    	<nav
    		class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    
    		<div class="container">
    			<a class="navbar-brand" href="/">Home</a>
    			<button class="navbar-toggler" type="button" data-toggle="collapse"
    				data-target="#navbarResponsive" aria-controls="navbarResponsive"
    				aria-expanded="false" aria-label="Toggle navigation">
    				<span class="navbar-toggler-icon"></span>
    			</button>
    			<button type="button" class="btn btn-danger" data-toggle="modal"
    				data-target="#myModal">Upload</button>
    			<div class="collapse navbar-collapse" id="navbarResponsive">
    				<ul class="navbar-nav ml-auto">
    					<li class="nav-item active"><a class="nav-link" href="#">Home
    							<span class="sr-only">(current)</span>
    					</a></li>
    					<li class="nav-item"><a class="nav-link" href="#">About</a></li>
    					<li class="nav-item"><a class="nav-link" href="#">Contact</a>
    					</li>
    				</ul>
    			</div>
    		</div>
    
    
    		<!-- Modal -->
    		<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
    			aria-labelledby="exampleModalLabel" aria-hidden="true">
    			<div class="modal-dialog" role="document">
    				<div class="modal-content">
    					<div class="modal-header">
    						<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
    						<button type="button" class="close" data-dismiss="modal"
    							aria-label="Close">
    							<span aria-hidden="true">&times;</span>
    						</button>
    					</div>
    					<div class="modal-body">...</div>
    					<div class="modal-footer">
    						<button type="button" class="btn btn-secondary"
    							data-dismiss="modal">Close</button>
    						<button type="button" class="btn btn-primary">Save
    							changes</button>
    					</div>
    				</div>
    			</div>
    		</div>
    
    
    
    	</nav>
    
    
    
    	<!-- Footer -->
    	<footer class="py-5 bg-dark">
    		<div class="container">
    			<p class="m-0 text-center text-white">Copyright &copy; MySite
    				2017</p>
    		</div>
    		<!-- /.container -->
    
    
    		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    			integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    			crossorigin="anonymous" async="async"></script>
    		<script
    			src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
    			integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
    			crossorigin="anonymous" async="async"></script>
    		<script
    			src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
    			integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
    			crossorigin="anonymous" async="async"></script>
    
    
    
    		<!--modal-->
    		<script>
    			$(document).ready(function() {
    				$("#myModal").modal();
    			});
    		</script>
    	</footer>
    </body>
    </html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

将您的模态代码移动到导航标记之外，如下所示。老实说，我不是百分之百确定原因，但我之前遇到过这个问题

不要更改任何bootstrap css，因为它很可能在将来出现问题。只需将代码移动一行即可。

＆＃13;
＆＃13; 
    <html>
    <head th:fragment="head">
    <meta charset="utf-8" />
    <meta name="viewport"
    	content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    
    <title>My site</title>
    
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet"
    	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
    	integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
    	crossorigin="anonymous" />
    
    <script>
    	$('#myModal').on('shown.bs.modal', function() {
    		$('#myInput').focus()
    	})
    </script>
    </head>
    <body>
    
    	<!-- Navigation -->
    	<nav
    		class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    
    		<div class="container">
    			<a class="navbar-brand" href="/">Home</a>
    			<button class="navbar-toggler" type="button" data-toggle="collapse"
    				data-target="#navbarResponsive" aria-controls="navbarResponsive"
    				aria-expanded="false" aria-label="Toggle navigation">
    				<span class="navbar-toggler-icon"></span>
    			</button>
    			<button type="button" class="btn btn-danger" data-toggle="modal"
    				data-target="#myModal">Upload</button>
    			<div class="collapse navbar-collapse" id="navbarResponsive">
    				<ul class="navbar-nav ml-auto">
    					<li class="nav-item active"><a class="nav-link" href="#">Home
    							<span class="sr-only">(current)</span>
    					</a></li>
    					<li class="nav-item"><a class="nav-link" href="#">About</a></li>
    					<li class="nav-item"><a class="nav-link" href="#">Contact</a>
    					</li>
    				</ul>
    			</div>
    		</div>

    
    
    
    	</nav>
      
    
    		<!-- Modal -->
    		<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
    			aria-labelledby="exampleModalLabel" aria-hidden="true">
    			<div class="modal-dialog" role="document">
    				<div class="modal-content">
    					<div class="modal-header">
    						<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
    						<button type="button" class="close" data-dismiss="modal"
    							aria-label="Close">
    							<span aria-hidden="true">&times;</span>
    						</button>
    					</div>
    					<div class="modal-body">...</div>
    					<div class="modal-footer">
    						<button type="button" class="btn btn-secondary"
    							data-dismiss="modal">Close</button>
    						<button type="button" class="btn btn-primary">Save
    							changes</button>
    					</div>
    				</div>
    			</div>
    		</div>      
    
    
    	<!-- Footer -->
    	<footer class="py-5 bg-dark">
    		<div class="container">
    			<p class="m-0 text-center text-white">Copyright &copy; MySite
    				2017</p>
    		</div>
    		<!-- /.container -->
    
    
    		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    			integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    			crossorigin="anonymous" async="async"></script>
    		<script
    			src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
    			integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
    			crossorigin="anonymous" async="async"></script>
    		<script
    			src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
    			integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
    			crossorigin="anonymous" async="async"></script>
    
    
    
    		<!--modal-->
    		<script>
    			$(document).ready(function() {
    				$("#myModal").modal();
    			});
    		</script>
    	</footer>
    </body>
    </html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

.modal-backdrop.show{
  z-index:1;
}

这将把模态带到最顶层。

.modal-backdrop.show {
  z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head th:fragment="head">
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="description" content="" />
  <meta name="author" content="" />

  <title>My site</title>

  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />

  <script>
    $('#myModal').on('shown.bs.modal', function() {
      $('#myInput').focus()
    })
  </script>
</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">

    <div class="container">
      <a class="navbar-brand" href="/">Home</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    				<span class="navbar-toggler-icon"></span>
    			</button>
      <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal">Upload</button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active"><a class="nav-link" href="#">Home
    							<span class="sr-only">(current)</span>
    					</a></li>
          <li class="nav-item"><a class="nav-link" href="#">About</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="5" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    							<span aria-hidden="true">&times;</span>
    						</button>
          </div>
          <div class="modal-body">...</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save
    							changes</button>
          </div>
        </div>
      </div>
    </div>



  </nav>



  <!-- Footer -->
  <footer class="py-5 bg-dark">
    <div class="container">
      <p class="m-0 text-center text-white">Copyright &copy; MySite 2017
      </p>
    </div>
    <!-- /.container -->


    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>



    <!--modal-->
    <script>
      $(document).ready(function() {
        $("#myModal").modal();
      });
    </script>
  </footer>
</body>

</html>

相关问题
最新问题