如何在 a:href 上弹出自定义模式？答案

【问题标题】：How to pop custom modal on a:href?如何在 a:href 上弹出自定义模式？
【发布时间】：2021-05-14 23:54:16
【问题描述】：

我是网络编码的新手，我一直在尝试让自定义模式显示单击“关于”，但它根本没有发生，我真的不知道为什么，有人知道吗？我放了我的完整网站，包括 CSS，因为我根本不知道什么与引导模式兼容，什么不兼容。

<!DOCTYPE html>
<html>
<head>

  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
  <title>Documento senza titolo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="Style.css">
  <link rel="icon" href="Senza titolo-1.ico">
</head>
<body>
  <div id="main">
    <br>
    <br>
    <div id="abovenavigation">
      <ul class="container">
        <li>
          <h1 class="About"><a href="#" data-toggle="modal" data-target="#myModal">ABOUT</a></h1>
        </li>
      </ul><!--ends container-->
    </div>
  </div>
  <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">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-="" dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

【问题讨论】：

你有 jsfiddle 设置吗？
好的，你现在有了sn-p
我已经全部改变了，我也尝试了，只是为了告诉你它没有按照我的方式工作，但我真的不知道为什么，似乎对我来说很好......

标签： html jquery css twitter-bootstrap

【解决方案1】：

您确实需要阅读有关模式的手册。最简单的方法是给你的<a id="btn-show-modal"> 一些额外的属性，即data-toggle="modal" 和data-target="#dialog-example"。接下来，您的模态结构中缺少一些 div：

<div class="modal fade" id="dialog-example">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Hi! Do You Want To Join My Fun English Course? Here's What You Need to Know!</h1>
      </div>

      <div class="modal-body">
        <pre>Cost Per Lesson: 10€; Hours Per Lesson: 1,30h; Days a Week: Monday to Thursday;</pre>    
      </div>

      <div class="modal-footer">
        <a href="#" class="btn">Close</a>
      </div>
    </div>
  </div>
</div>

注意modal-dialog 和modal-content；两者都从您的标记中丢失并导致奇怪的行为。另外，我不确定modal hide 是什么。请阅读此处了解更多信息：http://getbootstrap.com/javascript/#modals

现场演示：Bootply

【讨论】：

我在 youtube 上关注了这个教程：youtube.com/watch?v=XXgI8y0d4LU.. 我不知道为什么，我可以看到它在你的 feedle 上有效，但在我的网站上无效！这几天一直在琢磨，也不容易放弃，会不会是我的网站少了什么东西？
jsfiddle.net/u221vjz3 这是我的完整网站，你可以看到它不起作用
现在我什至尝试使用自定义模式，但它不会显示，我只是不知道，我按照引导网站上的说明进行操作..