时间戳

首页 > 解决方案 > 页面加载时模式不会自动出现

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

问题描述

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

我的模态有 div 标签id="my-modal"，当我使用相同的 ID$('#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>

标签： javascriptjqueryhtmltwitter-bootstrap

解决方案

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

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

尝试移动

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

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

推荐阅读