模态未在 href 上打开答案

【问题标题】：Modal not opening on href模态未在 href 上打开
【发布时间】：2019-05-02 21:11:15
【问题描述】：

当我点击 a href=.... （特权一）时，它应该打开模式，但它没有打开。虽然 URL 栏更改为 project/index.php#privilege_10

$(document).ready(function() {

  $(window.location.hash).modal('show');

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<a href="#privilege_10" class="btn btn-lg btn-dark">Privilege</a>

<!-- The Modal -->
<div class="modal" id="privilege_10">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Privilege Settings for
          <font color="blue">Name</font>
        </h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <form method="post" action="/jainvidhya/subdomains/teacher/teacher.php?id=10">
          <span class="float-right">Quiz Settings&nbsp;&nbsp;
		  <input type="checkbox" name="Privilege_Quiz_Name" id="Privilege_Quiz_Id" value="Y"checked='checked'/></span>
          <br />
          <span class="float-right">Question Settings&nbsp;&nbsp;
		  <input type="checkbox" name="Privilege_Question_Name" id="Privilege_Question_Id" value="Privilege_Question_Value"checked='checked'/></span>
          <br />
          <span class="float-right">Student Settings&nbsp;&nbsp;
		  <input type="checkbox" name="Privilege_Student_Name" id="Privilege_Student_Id" value="Y"checked='checked'/></span>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <input type="submit" class="btn btn-lg btn-info" name="submit" value="Submit">
        </form>
      </div>

    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

当我点击 a href=.... （特权一）时，它应该打开模式，但它没有打开。虽然 URL 栏更改为 project/index.php#privilege_10

【问题讨论】：

试试这个：$(window.location.hash).click()
尝试将data-toggle="modal" data-target="#privilege_10" 属性添加到您的a 标记中。
那么模态将如何获得它是开放的？ @RadonirinaMaminiaina
添加data-toggle和data-target后，我们以编程方式点击a标签

标签： javascript jquery html bootstrap-modal href

【解决方案1】：

也许你错过了选择器中的#：

$(`#${window.location.hash}`).modal('show');

【讨论】：

这在 Stack sn-p 等沙盒环境之外也能正常工作。

【解决方案2】：

在Walks's的帮助下comment将data-toggle="modal" data-target="#privilege_10"属性添加到a标签解决了这个问题。

$(document).ready(function() {

  $(window.location.hash).modal('show');

});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<a href="#privilege_10" class="btn btn-lg btn-dark" data-toggle="modal" data-target="#privilege_10">Privilege</a>

<!-- The Modal -->
<div class="modal" id="privilege_10">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Privilege Settings for
          <font color="blue">Name</font>
        </h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <form method="post" action="/jainvidhya/subdomains/teacher/teacher.php?id=10">
          <span class="float-right">Quiz Settings&nbsp;&nbsp;
		  <input type="checkbox" name="Privilege_Quiz_Name" id="Privilege_Quiz_Id" value="Y"checked='checked'/></span>
          <br />
          <span class="float-right">Question Settings&nbsp;&nbsp;
		  <input type="checkbox" name="Privilege_Question_Name" id="Privilege_Question_Id" value="Privilege_Question_Value"checked='checked'/></span>
          <br />
          <span class="float-right">Student Settings&nbsp;&nbsp;
		  <input type="checkbox" name="Privilege_Student_Name" id="Privilege_Student_Id" value="Y"checked='checked'/></span>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <input type="submit" class="btn btn-lg btn-info" name="submit" value="Submit">
        </form>
      </div>

    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

【讨论】：