单击href后未显示Boostrap模式

Question

I would like to show a pop modal after a user clicks a particular link on my page.我想在用户单击我页面上的特定链接后显示一个弹出模式。 I cannot however get the modal to actually pop up.然而，我无法让模态真正弹出。

This is what I have tried:这是我尝试过的：

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#Modal" class="btn btn-info btn-lg">Modal Control</a>
<div id="Modal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

$('a[href$="#Modal"]').on( "click", function() {
  $('#Modal').modal('show');
});

Answer 1

You need to include jQuery before popper and bootstrap.您需要在 popper 和 bootstrap 之前包含 jQuery。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

Working Code:工作代码：

 $(document).ready(function() { $('a[href$="#Modal"]').on("click", function() { $("#Modal").modal("show"); }); });

 <!DOCTYPE html> <html lang="en"> <head> <!-- BootStrap 4 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> <!-- Jquery --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" ></script> <!-- BootStrap 4 JS --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous" ></script> <title>Open Modal</title> </head> <body> <a href="#Modal" class="btn btn-info btn-lg">Modal Control</a> <div id="Modal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> &times; </button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> Close </button> </div> </div> </div> </div> </body> </html>

Answer 2

No need to use javascript.无需使用 javascript。 Just use data-toggle & data-target.只需使用数据切换和数据目标。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <a href="#" data-toggle="modal" data-target="#Modal" class="btn btn-info btn-lg">Modal Control</a>
    <div id="Modal" role="dialog" aria-labelledby="Modal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
          </div>
          <div class="modal-body">
            <p>Some text in the modal.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

Answer 3

You should remove the href="#Modal" from <a href="#Modal" class="btn btn-info btn-lg">Modal Control</a> and give any id ↓↓您应该从<a href="#Modal" class="btn btn-info btn-lg">Modal Control</a>删除href="#Modal"并提供任何 id ↓↓

<a id="modal_link" class="btn btn-info btn-lg">Modal Control</a>

$('#modal_link').on("click", function() {
    $('#Modal').modal('show');
});

This should work.这应该有效。

Edit--编辑 -

And yes you're missing jQuery library--是的，您缺少 jQuery 库--

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

单击href后未显示Boostrap模式

问题描述

3 个解决方案

解决方案1
1 2020-03-30 16:39:45

解决方案2
0 已采纳 2020-03-30 16:36:29

解决方案3
0 2020-03-30 16:39:28

单击href后未显示Boostrap模式

问题描述

3 个解决方案

解决方案1 1 2020-03-30 16:39:45

解决方案2 0 已采纳 2020-03-30 16:36:29

解决方案3 0 2020-03-30 16:39:28

解决方案1
1 2020-03-30 16:39:45

解决方案2
0 已采纳 2020-03-30 16:36:29

解决方案3
0 2020-03-30 16:39:28