个人中心
gpt4 book ai didi

javascript - 不止一个模态卡在循环中，Bootstrap

转载 作者：行者123 更新时间：2023-11-28 03:30:37 25 4
gpt4 key购买 nike

我最近在 Bootsrap 3 中遇到了模态问题。

我在一个测试网站上工作(不是我实际上会放在网上的任何东西)并且有 3 张图片(每张都在 col-md-4 中)彼此相邻，我计划在每张图片下方居中放置一个按钮可以单击模态以显示更多信息的图片。

我设置了第一个模式，效果很好。
但是，当我添加第二个时，我发现当您单击任一按钮时，两个模态显示在彼此之上(第二个首先出现)，当您按下“返回主页”时，它会转到另一个模态.

你只能按一两次“X”才能回到家。

我几乎可以肯定这是由于我在 <head> 中的 JavaScript 造成的非常不正确，但我不是很擅长 JS，也不知道我做错了什么......

这是 html，因此您可以检查我的手工作品:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>space</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300" rel="stylesheet"> 
    <script type="text/javascript">
      $(function(){
        $(".btn").click(function(){
          $("#chimechoModal").modal('show');
        });
      });
    </script>
    <script type="text/javascript">
      $(function(){
        $(".btn").click(function(){
          $("#eeveeModal").modal('show');
        });
      });
    </script>
  </head>
  <body>
    <div class="container custom-container">
      <div class="row">
        <div class="col-xs-12" style="height:15px;"></div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <img src="images/logo.png" class="img-responsive">
        </div>
        <div class="col-md-6 text-right text-uppercase">
          <h1>Mini Pokedex</h1>
          <h4>Created by spaceman1980</h4>
        </div>
      </div>
      <div class="row">
        <hr>
      </div>
      <div class="row">
        <div class="col-md-4">
          <img class="img-responsive center-block" src="images/chimecho.png" style="width: 100%; height: auto;">    
        </div>
        <div class="col-md-4">
          <img class="img-responsive center-block" src="images/eevee.png" style="width: 100%; height: auto;">   
        </div>
        <div class="col-md-4">
          <img class="img-responsive center-block" src="images/james.jpg" style="width: 100%; height: auto;">   
        </div>
      </div>
      <div class="row">
        <div class="col-md-4 text-center">
          <!-- Button trigger modal -->
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#chimecho">
            Pokedex Entry
          </button>

          <!-- Modal -->
          <div class="modal fade" id="chimechoModal" tabindex="-1" role="dialog" aria-labelledby="chimechoLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <div class="row">
                    <div class="col-md-6 text-left">
                      <h5 class="modal-title" id="chimechoLabel">The Wind Chime Pokemon</h5>
                    </div>
                    <div class="col-md-6 text-right">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="modal-body">
                  <h5>
                    Chimecho makes its cries echo inside its hollow body. When this Pokémon becomes enraged, its cries result in ultrasonic waves that have the power to knock foes flying.
                  </h5>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Back to home</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 text-center">
          <!-- Button trigger modal -->
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#eevee">
            Pokedex Entry
          </button>

          <!-- Modal -->
          <div class="modal fade" id="eeveeModal" tabindex="-1" role="dialog" aria-labelledby="eeveeLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <div class="row">
                    <div class="col-md-6 text-left">
                      <h5 class="modal-title" id="eeveeLabel">The Evolution Pokemon</h5>
                    </div>
                    <div class="col-md-6 text-right">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="modal-body">
                  <h5>
                    Eevee has an unstable genetic makeup that suddenly mutates due to the environment in which it lives. Radiation from various stones causes this Pokémon to evolve.
                  </h5>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Back to home</button>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </body>
</html>

最佳答案

1) 即使您使用的是内联 javascript，也无需定义 <script>标记两次

2) 代码中的这一行表示，只要单击 DOM 中类为“btn”的元素，它就会执行一个功能(在您的情况下打开模式)。您正在监听“btn”元素的点击事件。

 $(".btn").click(function(){

您可以为每种模式类型的每个按钮分配不同的类。例如，

<script type="text/javascript">

    <button type="button" class="btn btn-primary btn-chimecho" data-toggle="modal" data-target="#chimecho">

    <button type="button" class="btn btn-primary btn-eevee" data-toggle="modal" data-target="#eevee">


     $(function(){
       $(".btn-chimecho").click(function(){
           $("#chimechoModal").modal('show');
         });
       $(".btn-eevee").click(function(){
           $("#eeveeModal").modal('show');
         });

     });

</script>

关于javascript - 不止一个模态卡在循环中，Bootstrap，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44751321/

25 4 0
文章推荐： css - 为什么 Bootstrap 显示带空格的列
文章推荐： javascript - 数据表将输入搜索集中在 Bootstrap Modal 上
文章推荐： c# - 理论 Mpx/s 值取决于处理器速度和 RAM
文章推荐： javascript - 如何获取焦点上单击元素的数据属性
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com