个人中心
gpt4 book ai didi

javascript - 页面加载时模式不会自动出现

转载 作者：行者123 更新时间：2023-11-27 22:58:17 25 4
gpt4 key购买 nike

我找不到当此页面加载时我的模式不触发的原因。

我的模式有 div 标签 id="my-modal" 并且当我在 $('#my-modal').modal('show '); 但什么也没有出现。

两种选择(使用 $(document).ready(function(){ 或 $(window).on('load',function(){) 都有在页面中没有效果。

有人可以帮忙吗？这是代码:

<?php
  session_start();
  require_once('info.vc.php');
?>

<!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>COUPONS | CARDS</title>
    <meta name="author" content="STASHTECH">
    <meta name="robots" content="NOINDEX, NOFOLLOW" />

    <link href="../_lib/v/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <script src="../_lib/v/ckeditor/ckeditor.js"></script>

    <link rel="stylesheet" href="../cards/css/style.css">
    <link rel="apple-touch-icon" href="../img/favicon.png">
    <link rel="icon" href="../img/favicon.png">

    <script src="https://www.paypalobjects.com/api/checkout.js"></script>

  </head>

  <body class="bg-color-white">

    <?php require_once('header-only.php'); ?>

      <div id="my-modal" class="modal text-align-center">
        <div class="m-content">
          <div class="m-header">
            <span class="close">&times;</span>
            <h1>THANK YOU FOR CLAIMING A COUPON!</h1>
          </div>
          <div class="m-body">
            <h1 class="bold_font color-mwc-orange">YOU HAVE CHOSEN:</h1>
              <br>

              <?php
                $claim_coupon = $rowProduct['title'];
                $claim_coupon = strtoupper($claim_coupon);
                echo '<h1 class="bold_font color-mwc-blue">'.$claim_coupon.'</h1>';
              ?>

              <br>
              <div id="container">
                <?php
                    if ($packageid <= 1) {
                    $ribbon = 'ribbon-elite';
                  } else if ($packageid == 2) {
                    $ribbon = 'ribbon-premium';
                  } else if ($packageid == 3) {
                    $ribbon = 'ribbon-luxury';
                  }

                  echo('<a href="membership.php"><img style="display:inline;" src="../img/'.$ribbon.'.png"></a> ');

                    if($packageid == 1) {
                    echo('<h1 style="display:inline;">Elite <br/></h1>');
                  } else if($packageid == 2) {
                    echo('<h1 style="display:inline;">Premium <br/></h1>');
                  } else if($packageid == 3) {
                    echo('<h1 style="display:inline;">Luxury <br/></h1>');
                  }
                ?>
              </div>
            <h3>to view other coupons you have claimed, <a href="membership.php" class="no-underline">click here.</a></h3>
            <br>
          </div>
        </div>
      </div>

    <div class="container">

      <div class="row">
        <div class="col-md-12 spacer"></div>

        <div class="col-md-5">
          <img src="../img/uploads/<?php echo($rowProduct['photosrc']); ?>" class="img-responsive clinic">
          <img src="../img/shadow-bottom.png" class="img-responsive">


          <div class="col-md-12 spacer"></div>
          <div class="col-xs-12 text-align-center">
            <input type="submit" class="full_width registerbtn " id="back" value="BACK">
          </div>
          <div class="col-md-12 border-top spacer"><br></div>


          <div class="col-md-12 spacer"><br></div>
        </div>

        <div class="col-md-6 col-md-offset-1 border-left">
          <br>
          <div class="col-md-12">
            <br>
            <br>

            <?php  echo($rowProduct['body']); ?>

          </div>

        </div>
      </div> 

      <div class="row">
        <div class="col-md-12 spacer">
        </div>
      </div>


<div class="row border-top">
  <div class="col-md-12">
    <br> RELATED CARDS <br><br>

    <?php
      $i = 0;
      foreach($lstProduct as $rowProduct) {
    ?>
      <div class="col-md-4 spacer">
        <div class="col-md-12">
          <?php
            $packageid = $rowProduct['packageid'];

            if ($packageid <= 1)
              $ribbon = 'ribbon-elite';
            elseif ($packageid == 2)
              $ribbon = 'ribbon-premium';
            elseif ($packageid == 3)
              $ribbon = 'ribbon-luxury';

            for($j = 0; $j < $packageid; $j++) {
              echo(' <img src="../img/'.$ribbon.'.png" class="small-icon"> ');
            }
          ?>
        </div>


        <div class="col-md-12">
          <a href="info.php?i=<?php echo($rowProduct['productid']) ?>">
            <img src="../img/uploads/<?php echo($rowProduct['photosrc']) ?>" class="img-responsive clinic">
            <img src="../img/shadow-bottom.png" class="img-responsive">
          </a>
        </div>
      </div>
    <?php
      $i = $i + 1;
      if($i >= 3) {
        echo('<div class="col-md-12"></div>');
        $i = 0;
      }
    } ?>

  </div>
</div>

      <div class="row">
        <div class="col-md-12 spacer">
        </div>
      </div>

    </div>

    <script type="text/javascript">
    $(document).ready(function () {
        $('#my-modal').modal('show');
    });
    </script>
    <script src="js/back_button.js"></script>
    <script src="../_lib/v/jquery.slim.min.js"></script>
    <script src="../_lib/v/bootstrap/js/bootstrap.min.js"></script>
    <script src="../_lib/v/jquery-ui/jquery-ui.js"></script>
    <script src="../_lib/v/jscolor/jscolor.js"></script>
  </body>
</html>

最佳答案

虽然我们没有在问题中提供任何错误或调试数据，但如果我不得不通过查看代码做出假设，我会说最有可能的问题是您正在尝试运行 jQuery在将 jQuery 加载到页面之前的代码。这可能会在您的控制台中生成错误，例如 $ is not defined - 这是在告诉您它找不到执行您的代码所需的 jQuery 函数。

浏览器执行 <script>加载 block 后立即加载 block - block 按照它们在 HTML 中找到的顺序加载。

尝试移动

<script type="text/javascript">
    $(document).ready(function () {
        $('#my-modal').modal('show');
    });
</script>

低于所有其他<script> block - 作为一般规则，您通常应该在页面 JS 之前加载外部 JS，以避免这种依赖性问题。

关于javascript - 页面加载时模式不会自动出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54232279/

25 4 0
文章推荐： javascript - Meteor 对象在控制台中可用，但抛出“无法读取未定义的属性 findOne”
文章推荐： C++程序陷入循环
文章推荐： c++ - 使用动态对象分配标准 vector 内容
文章推荐： javascript - Bootstrap 阻止表单提交
行者123
个人简介

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

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