модал не появляется автоматически при загрузке страницы - PullRequest
Новая
       1

модал не появляется автоматически при загрузке страницы

0 голосов
/ 17 января 2019

Я не смог найти причину, по которой мой модал не срабатывает при загрузке этой страницы.

Мой модал имеет тег 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>

1 Ответ

0 голосов
/ 17 января 2019

Хотя у нас нет данных об ошибках или отладке, представленных в вопросе, если бы мне пришлось просто сделать предположение, глядя на код, я бы сказал, что наиболее вероятная проблема заключается в том, что вы пытаетесь запустить jQuery код, прежде чем вы загрузили JQuery на страницу. Скорее всего, это приведет к ошибке в вашей консоли, такой как $ is not defined - это говорит о том, что она не может найти необходимые функции jQuery для выполнения вашего кода.

Браузеры выполняют блоки <script>, как только они их загружают - и блоки загружаются в порядке их нахождения в HTML.

Попробуйте переместить 

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

ниже всех других <script> блоков - как правило, вы должны обычно загружать внешний JS перед JS на странице, чтобы избежать такого рода проблем с зависимостями.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...