Question

我似乎无法弄清楚为什么引导程序的模态窗口没有弹出。我正在调查其他类似的问题，但仍然无法正常工作。

我尝试了消除过程，并尝试消除了所有脚本（引导脚本除外），但该脚本仍无法打开。与我的CSS文件相同。我还为模态窗口输入了手动代码（在合并引导程序之前），因此我担心其他模态的id =“ modal”会产生干扰。我也删除了这些内容，但无济于事。

这是我的代码笔，我对模式窗口代码开始的部分进行了注释：https://codepen.io/eylenkim/pen/KKwMPLm

HTML：

<!--
   -- fix other <a> tags // fix navigation
   --fix "exit" for contact pop up (mobile)
   -- center the Contact dialog box on viewport in mobile
   -->
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8"/>
      <title>Art By Eylen | Shop</title>
      <meta name="description" content="Browse Eylen's art portfolio to view work created with 35mm photography, blockprinting, and acrylic.">
      <meta name="author" content="Eylen Kim">
      <!--  data-src
         ––––––––––––––––––––––––––––––––––––––––––––––––––- -->
      <link href="subpage-stylesheet.css" rel=stylesheet type="text/css">
      <link href="StyleSheet.css" rel=stylesheet type="text/css">
      <link href="skeleton.css" rel=stylesheet type="text/css">
      <link href="otherCss/normalize.css" rel="stylesheet" type="text/css">
      <link href="otherCss/font-awesome.css" rel=stylesheet type="text/css">
      <link href="bootstrap-4.3.1-dist/css/bootstrap.css" rel=stylesheet type="text/css">
      <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" type="text/css">
      <!-- Mobile Meta 
         ––––––––––––––––––––––––––––––––––––––––––––––––––-->
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <!--  Favicon
         ––––––––––––––––––––––––––––––––––––––––––––––––––-->
      <link rel="icon" type="image/png" href="photo/favicon1.png" />
   </head>
   <!--   Menu // Hamburger Bar  
      ––––––––––––––––––––––––––––––––––––––––––––––––––-->
   <nav class="navigation">
      <a href="#" class="menu-icon">
      <i class="fa fa-bars"></i>
      </a>
      <ul class="main-navigation" role="navigation">
         <div id="nav-x" class="menu-icon">&Cross;</div>
         <li>
            <div href="index.html">
            Home</a>
         </li>
         <li>
            <div href="portfolio.html">
            Portfolio</a>
         </li>
         <li>
            <div class="trigger" style="height: 100%;padding: 10px 0 10px 10px;">
               About Me 
               <div class="modal">
                  <div class="modal-content" style="height: 95%; max-height: 600px;padding: 2rem 4.6rem;">
                     <span class="close-button">&times;</span>
                     <h3>
                        Hello,<br>I'm Eylen!
                     </h3>
                     <img id="about-me-pic" src="photo/meee.JPG">
                     <p style="font-size: .75em; height: 44.3%; padding-top: 15px;">This art website is my passion project. I have coded my own platform to showcase & sell my art. What a treat to have you here on this site!<br><br> The mediums I work with: 35mm film photography, acrylic (canvas & glass), polymer clay (earrings), and printmaking.
                        <br><br>
                        In my free time I like petting my cat, tickling some gnarly tunes on the bass/electric guitar, coding, playing video games, and doing art stuff.<br><br>
                     </p>
                  </div>
               </div>
            </div>
         </li>
         <li style="height: 100%;padding: 20px 0 10px 7px;">
            <p class="about-me-desktop" onclick="document.getElementById('id01').style.display='block'" style="position: relative;top: -3px;">Contact
            </p>
            <div class="w3-container">
               <div id="id01" class="w3-modal">
                  <div class="modal-content-contact-portfolio">
                     <span class="close-button" onclick="document.getElementById('id01').style.display='none'" >&times;</span>
                     <h3 style="margin-bottom: 0px;">
                        Contact Me
                     </h3>
                     <p>
                     <div class="contact-us-form" style="font-size: .7em;">
                        <form action="https://formspree.io/eylenkim@gmail.com" method="POST">
                           <div class="row" style="z-index: 9999999;">
                              <div class="six columns">
                                 <input class="u-full-width" type="text" placeholder="Name" id="nameInput" name="Name" requiprintmaking>
                              </div>
                              <div class="six columns">
                                 <input class="u-full-width" type="email" placeholder="Email" id="emailInput" name="Email" requiprintmaking>
                              </div>
                           </div>
                           <textarea class="u-full-width" placeholder="Message" id="messageInput" name="Message" requiprintmaking style="height: 160px;margin-top: 20px;line-height: 17px;padding-top: 8px;"></textarea>
                           <input class="button u-pull-right" type="submit" value="Send" style="color: black;"><br><br><br>
                        </form>
                     </div>
                     </p>
                  </div>
               </div>
            </div>
         </li>
      </ul>
   </nav>
   <header>
      <div class="container fade-in">
         <div class="row">
            <a href="index.html">
               <h1 class="one-third column u-pull-left">Art By <span><br></span><span id="h1-title-span"> Eylen</span></h1>
            </a>
            <h2 class="one-third column u-pull-left" id="portfolio-title-desktop">|  Shop</h2>
            <h2 class="one-third column u-pull-left" id="portfolio-title-mobile">
               <span>&boxh;&boxh;<br></span>Shop
            </h2>
            <div class="about-contact-text" class="one-third column u-pull-right">
               <a href="index.html">
                  <p class="about-me-desktop">Home</p>
               </a>
               <span class="trigger">
                  <p class="about-me-desktop">
                     About Me
                  </p>
                  <div class="modal">
                     <div class="modal-content">
                        <span class="close-button">&times;</span>
                        <h3>
                           Hello,<br>I'm Eylen!
                        </h3>
                        <img id="about-me-pic" src="photo/meee.JPG">
                        <p>This art website is my passion project. I have coded my own platform to showcase & sell my art. What a treat to have you here on this site!<br><br> The mediums I work with: 35mm film photography, acrylic (canvas & glass), polymer clay (earrings), and printmaking.
                           <br><br>
                           In my free time I like petting my cat, tickling some gnarly tunes on the bass/electric guitar, coding, playing video games, and doing art stuff.<br><br>
                        </p>
                     </div>
                  </div>
               </span>
               <p class="about-me-desktop" onclick="document.getElementById('id02').style.display='block'">
                  Contact
               </p>
               <div class="w3-container">
                  <div id="id02" class="w3-modal">
                     <div class="modal-content-contact">
                        <span class="close-button" onclick="document.getElementById('id02').style.display='none'" >&times;</span>
                        <h3 style="margin-bottom: 0px;">
                           Contact Me
                        </h3>
                        <p>
                        <div class="contact-us-form">
                           <form action="https://formspree.io/eylenkim@gmail.com" method="POST">
                              <div class="overlap-text">
                                 <div class="overlap-text-base-contact">
                                    <h2 class="load two-thirds column">Contact</h2>
                                 </div>
                              </div>
                              <div class="row" style="z-index: 9999999;">
                                 <div class="six columns">
                                    <input class="u-full-width" type="text" placeholder="Name" id="nameInput" name="Name" required>
                                 </div>
                                 <div class="six columns">
                                    <input class="u-full-width" type="email" placeholder="Email" id="emailInput" name="Email" required>
                                 </div>
                              </div>
                              <br>
                              <textarea class="u-full-width" placeholder="Message" id="messageInput" name="Message" required style="  height: 100px;
                                 margin-top: 10px;
                                 line-height: 17px;
                                 padding-top: 8px;"></textarea>
                              <br><br>
                              <input class="button u-pull-right" type="submit" value="Send"><br><br><br>
                           </form>
                        </div>
                        </p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
   </header>
   <body class="top" id="top">
   <section class="grid-wrapper">
   <div class="filter-controls">
   <div class="control fade-in">Filter By:
   <select class="filter-field form-control">
   <option value="">None</option>
   <option value="prints">Prints</option>
   <option value="earrings">Earrings</option>
   <option value="commissions">Commisions</option>
   </select>
   </div>
   </div>

   <div class="grid bootstrap-on fade-in" style="flex-direction: row !important;">  

  <!------ Product w/ Carousel ---------------------------------------------------------------------->
   <div class="card item" data-color="earrings"> 
    <div class="price-tag">$10</div>
    <div id="earrings1" class="carousel slide" data-interval="false">
   <div class="carousel-inner">
   <div class="carousel-item active">
   <img src="image" class="d-block w-100 crop-shp" alt="...">
   </div>
   <div class="carousel-item">
   <img src="image" class="d-block w-100 crop-shop" alt="...">
   </div>
   </div>
   <a class="carousel-control-prev" href="#earrings1" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
   </a>
   <a class="carousel-control-next" href="#earrings1" role="button" data-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
   </a>
     </div>
   <div class="card-body">
   <h5 class="card-title">Carousel</h5>
   <p class="card-text">I want to potentially add the ability to click on the carousel images for the pop up modal</p>
   </div>
   </div>

  <!------ Product w/ Modal Window ---------------------------------------------------------------------->
   <div class="card item" data-color="prints"> 
   <div class="price-tag" data-toggle="modal" data-target="#exampleModal">$10</div>
   <img src="image" class="card-img-top crop-shop" alt="Print" data-toggle="modal" data-target="#exampleModal">
   <div class="card-body">
   <h5 class="card-title">(Modal Window)</h5>
   <p class="card-text">I want the modal window to pop up when clickin on the image</p>
   </div>

   </div>
   </div>

   <!-- Modal ------------------------------------------------------------------------------------>
   <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">
   <div class="modal-content">
   <div class="modal-header">
   <h5 class="modal-title" id="exampleModalLabel">Cute Earrings</h5>
   <button type="button" class="close" data-dismiss="modal" aria-label="Close">
   <span aria-hidden="true">&times;</span>
   </button>
   </div>
   <div class="modal-body">
   <p>THIS IS THE MODAL!</p>
   <a href="#" class="btn btn-primary">Buy</a>
   </div>
   <div class="modal-footer">
   <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
   </div>
   </div>
   </div>
   </div>
   </div> 
   </select>       
   </section>
   <!----- Muuri Filtering ----->
   <script>
      document.addEventListener('DOMContentLoaded', function () {
      var grid = null,
          wrapper = document.querySelector('.grid-wrapper'),
          searchField = wrapper.querySelector('.search-field'),
          filterField = wrapper.querySelector('.filter-field'),
          sortField = wrapper.querySelector('.sort-field'),
          gridElem = wrapper.querySelector('.grid'),
          searchAttr = 'data-title',
          filterAttr = 'data-color',
          searchFieldValue,
          filterFieldValue,
          sortFieldValue,
          dragOrder = [];

      // Init the grid layout
      grid = new Muuri(gridElem, {
        dragEnabled: false,
        layout: {
          fillGaps: true
        }
      });

      // Filter field event binding
      filterField.addEventListener('change', filter);

      // Sort field event binding
      sortField.addEventListener('change', sort);

      // Filtering
      function filter() {
        filterFieldValue = filterField.value;
        grid.filter(function (item) {
          var element = item.getElement(),
              isSearchMatch = !searchFieldValue ? true : (element.getAttribute(searchAttr) || '').toLowerCase().indexOf(searchFieldValue) > -1,
              isFilterMatch = !filterFieldValue ? true : (element.getAttribute(filterAttr) || '') === filterFieldValue;
          return isSearchMatch && isFilterMatch;
        });
      }
      });

   </script>
   <script src="js/muuri.js"></script>
   <script src="https://unpkg.com/web-animations-js@2.3.2/web-animations.min.js"></script>
   <!--Modal - Dialog Boxes -->
   <script type="text/javascript"> const modals = Array.from(document.querySelectorAll('.modal'));
      const triggers = Array.from(document.querySelectorAll('.trigger'));
      var closeButton = document.querySelector(".close-button"); 

      //if a trigger is clicked then...
      for (const trigger of triggers) {
        trigger.addEventListener('click', toggleModal);
      }

      // .. then toggle it's modal
      function toggleModal(event) { event.target.closest('.trigger').querySelector('.modal').classList.toggle("show-modal"); }

        // check if the clicked element is a modal, or in a modal
      function windowOnClick(event) {
        if (modals.some((modal) => modal.contains(event.target))) {
          toggleModal();
        }
      }
   </script>
   <script>
      function closeButton() {
        document.getElementByClass('id02').style.display='none'
      }

   </script>
   <!----- JS files ----->
   <script type="text/javascript" src="js/scripts.js"></script> 
   <script type="text/javascript" src="js/singlenav.js"></script>
   <script type="text/javascript" src="js/scrollreveal.js"></script> 
   <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.4.0/dist/lazyload.min.js"></script>
   <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
   <a href="#top" id="return-to-top"><i class="icon-chevron-up"></i></a>  
   <!----- Lazy Load ----->
   <script>
      (function() {
        function logElementEvent(eventName, element) {
          console.log(
            Date.now(),
            eventName,
            element.getAttribute("data-src")
          );
        }
        var callback_enter = function(element) {
          logElementEvent("? ENTERED", element);
        };
        var callback_exit = function(element) {
          logElementEvent("? EXITED", element);
        };
        var callback_reveal = function(element) {
          logElementEvent("?️ REVEALED", element);
        };
        var callback_loaded = function(element) {
          logElementEvent("? LOADED", element);
        };
        var callback_error = function(element) {
          logElementEvent("? ERROR", element);
          element.src =
            "https://via.placeholder.com/440x560/?text=Error+Placeholder";
        };
        var callback_finish = function() {
          logElementEvent("✔️ FINISHED", document.documentElement);
        };
        ll = new LazyLoad({
          elements_selector: ".lazy",
          load_delay: 300,
          threshold: 0,
          // Assign the callbacks defined above
          callback_enter: callback_enter,
          callback_exit: callback_exit,
          callback_reveal: callback_reveal,
          callback_loaded: callback_loaded,
          callback_error: callback_error,
          callback_finish: callback_finish
        });


      })();
   </script>
   <!----- Scroll To Top ----->
   <script>
      $(window).scroll(function() {
          if ($(this).scrollTop() >= 600) {        // If page is scrolled more than 50px
              $('#return-to-top').fadeIn(200);    // Fade in the arrow
          } else {
              $('#return-to-top').fadeOut(200);   // Else fade out the arrow
          }
      });
      $('#return-to-top').click(function() {      // When arrow is clicked
          $('body,html').animate({
              scrollTop : 0                       // Scroll to top of body
          }, 500);
      });
   </script>
   </body>
</html>

Answer 1

有2个单独的问题阻止模态显示。

1）第一个问题是您的代码

您使用的引导程序库返回404。

如何检查它是否正在发生？
- 打开浏览器的检查器，然后按CTRL + SHIFT + I
- 您将看到：
  - Failed to load resource: the server responded with a status of 404 () eylenkim/fullpage/bootstrap-4.3.1-dist/css/bootstrap.css
- 实际上，您的很多相对URL都会发生这种情况。

解决方案

用工作库替换指向Bootstrap库的链接，例如。来自https://getbootstrap.com/

我在测试您的代码时使用的代码：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

有关模式的最低代码示例，请参见要点：https://codepen.io/edwin-chua/pen/rNaLOEg

修复链接问题后，您将遇到第二个问题。

2）第二个问题是您的样式表

按照我的建议修改代码后，您会得到一个没有模态的深色覆盖。

删除对https://eylenkim.github.io/ArtByEylen/StyleSheet.css的引用将允许显示模式，因此此处的某些内容会干扰模式的css。

这是一支工作笔：https://codepen.io/edwin-chua/pen/QWwEyyZ

单独的问题

您似乎已经两次导入了一些库，一次是在Codepen UI中，一次是在HTML文件中。这将使您调试麻烦。确保只导入一次。由于您正在构建整个网页，因此建议将所有网页都放在HTML文件中。

另请参见JS标签

和

Bootstrap模态窗口由于与其他元素的干扰而无法打开

2 个答案:

1）第一个问题是您的代码

您使用的引导程序库返回404。

解决方案

2）第二个问题是您的样式表

单独的问题

更多评论