1. ホーム
  2. 質問と答え
  3. <a>要素をクリックするとモーダルボックスが表示されません

<a>要素をクリックするとモーダルボックスが表示されません

2017-01-04 7 views
1

"fullpage.js"に基づいてウェブサイトを構築していますが、スライドがいくつかあります。すべてのスライドについて、"a"要素で作成された情報ボタンがブートストラップからのグリフコンを持っています。なしを表示：ブロックインフォボタンがクリックされたとき、私はディスプレイから「はを.closed」トグルで表示するmodal1のIDを持つモーダルボックスをしたいです。<a>要素をクリックするとモーダルボックスが表示されません

モーダルが表示されない問題は、console.logを関数に追加しようとしましたが、ボタンをクリックしても何も起こりません。私の場合はjQueryを使用していますが、より良い方法があれば歓迎以上のものになります。

私は質問に無関係だと思ったウェブサイトの部分を削除しました。ここで

は、実際のウェブサイトへのリンクです：click here

これは私のコードです：

HTML & Javascriptを 

<head> 
    <!--jQuery--> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<!-- Bootstrap--> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

    <!--Google fonts--> 
    <link href="https://fonts.googleapis.com/css?family=Prompt|Text+Me+One|Quicksand|Monoton" rel="stylesheet"> 

    <!--Fullpage.js--> 
    <script src="Fullpage-js/fullPage.js-master/vendors/jquery.easings.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="Fullpage-js/jquery.fullPage.css" /> 
    <script type="text/javascript" src="Fullpage-js/jquery.fullPage.js"></script> 
    <!--CSS file--> 
    <link rel="stylesheet" type="text/css" href="css/style.css" /> 
    <!--particles.js--> 
    <script src="particles.js-master/particles.js"></script> 
    <script type="text/javascript"> 
     particlesJS.load('particles-js', 'particles.js-master/particlesjs-config.json', function() { 
      console.log('callback - particles.js config loaded'); 
     }); 
    </script> 
    <!--Fullpage setup--> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#fullpage').fullpage({ 
       sectionsColor: ['rgba(255, 255, 255, 0)', 'rgba(105, 163, 193, 0.63)', 'rgba(255, 255, 255, 0)', '#f1937a', ], 
       anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', ], 
       //     navigation: true, 
       slidesNavigation: true, 
       continuousVertical: true, 
       verticalCentered: true, 
       touchSensitivity: 5, 
       css3:true, 
       easingcss3: "ease-in-out", 
       recordHistory: false, 
       //    scrollBar:true 
      }); 
     }); 
    </script> 

</head> 
<body> 


     <div class="section first"> 
     </div> 
     <!--SECTION 2--> 
     <div class="section"> 
     </div> 
     <!--SECTION 3--> 
     <div class="section"> 
      <div class="slide"> 
       <div class="slideContainer"> 
         <h1>text</h1> 
         <!--Buttons--> 


    <!--This div contains the two buttons--> 
         <div class="buttonContainer"> 

    <!--This one should trigger the modal box--> 
          <a class="info" id="button1"> 
           <span class="glyphicon glyphicon-info-sign"></span>       
          </a> 

    <!--Another button--> 
          <a href="" class="info"> 
           <span class="glyphicon glyphicon-globe"></span> 
          </a> 
         </div> 

       <!--This is the modal div-->  
         <div class="modal" id="modal1"> 
          <div> 
           <p>bla bla bla</p> 
           <a href="#close" title="Close" id="close">X</a> 
          </div> 
         </div> 

    <!--modal overlay--> 
         <div class="modal-overlay" id="modal-overlay"> 
         </div> 
       </div> 
      </div> 

<!--Other slides--> 
      <div class="slide"> 
      <div class="slide"> 
      </div> 
     </div> 
     <!--SECTION 4--> 
     <div class="section"> 
     </div> 
    </div> 


    <!--GENERAL JAVASCRIPT--> 
    <script type="text/javascript"> 

     //The code that should trigger the modal 

     var modal = document.querySelector("#modal1"); 
     var modalOverlay = document.querySelector("#modal-overlay"); 
     var closeButton = document.querySelector("#close"); 
     var openButton = document.querySelector("#button1"); 

     closeButton.addEventListener("click", function() { 
      console.log("it works"); 
      modal.classList.toggle("closed"); 
      modalOverlay.classList.toggle("closed"); 
     }); 

     openButton.addEventListener("click", function() { 
      modal.classList.toggle("closed"); 
      modalOverlay.classList.toggle("closed"); 
     }); 

    </script> 
</body> 
</html>

CSS

/*colors used: 
Blue:#69a3c1 
Orange:#f1937a 
*/ 

.section { 
    margin-top: 0; 
} 
.particles { 
    height: 100vh !important; 
    width: 100vw !important; 
    position: fixed; 
    z-index: 0; 
} 
body { 
    margin: 0; 
    font-family: "adam" !important; 
} 
.first { 
    z-index: 1; 
} 
#fp-nav ul li a span, 
.fp-slidesNav ul li a span {} #fp-nav ul li a.active span, 
.fp-slidesNav ul li a.active span, 
#fp-nav ul li:hover a.active span, 
.fp-slidesNav ul li:hover a.active span {} .fp-prev { 
    margin-left: 3vw; 
} 
.slideContainer h1 { 
    font-family: 'Text Me One', sans-serif; 
    font-weight: 200; 
    color: black; 
    font-size: 5vw; 
} 
.slideContainer { 
    margin: 0 auto; 
    width: 50vw; 
    text-align: center; 
} 
.slideContainer img { 
    width: 20vw; 
} 
.fp-controlArrow.fp-prev { 
    border: none; 
    width: 70px; 
    height: 105px; 
    margin-left: -15px; 
    background-image: url(../images/left-arrow.png); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: 50px 50px; 
    background-color: rgba(241, 147, 122, 0.4); 
    -webkit-transition: background-color 0.2s; 
} 
.fp-controlArrow.fp-prev:hover { 
    background-color: rgba(241, 147, 122, 0.7); 
} 
.fp-controlArrow.fp-next { 
    border: none; 
    width: 70px; 
    height: 105px; 
    margin-right: -15px; 
    background-image: url(../images/right-arrow.png); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: 50px 50px; 
    background-color: rgba(241, 147, 122, 0.4); 
    -webkit-transition: background-color 0.2s; 
} 
.fp-controlArrow.fp-next:hover { 
    background-color: rgba(241, 147, 122, 0.7); 
} 
.info { 
    float: left; 
    margin-left: 20px; 
    margin-right: 20px; 
    width: 50px; 
    height: 50px; 
} 
.info div { 
    width: 60px; 
    height: 60px; 
    border-radius: 100px; 
    background-color: aqua; 
    margin: 0 auto; 
} 
.slideContainer h1 { 
    font-family: 'Monoton', cursive; 
    font-size: 9vw; 
    color: #69a3c1; 
    white-space: pre; 
    margin-bottom: 8vh; 
} 
.slideContainer { 
    width: 100vw; 
} 
.buttonContainer { 
    display: inline-block; 
    margin: 0 auto; 
} 
.buttonContainer span { 
    font-size: 4vw; 
    border-radius: 100px; 
    border: 0; 
    color: #69a3c1; 
    -webkit-transition: background-color 0.2s; 
    -webkit-transition: color 0.2s; 
} 
.buttonContainer span:hover { 
    color: #f1937a; 
    cursor: pointer; 
    a 
} 
.modal { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 600px; 
    max-width: 100%; 
    height: 400px; 
    max-height: 100%; 
    z-index: 1010; 
} 
.modal-overlay { 
    z-index: 1000; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    /* for example... */ 

    display: block; 
} 
.modal.closed { 
    display: none; 
}

ありがとう！

出典

2017-01-04 ashraf s.

答えて

2

あなたのサイトを見て、モーダルボタンが動作し、クリックイベントが発生します。しかし、私は2つの問題が見つかりました：モーダルを切り替えるため

  1. トグルクラス.closed

    ブートストラップクラスを.modal-openです。あなたはこれを逆の方法で行いますが、これは問題ありませんが、デフォルトで.modalのCSSをdisplay: blockに変更する必要があります。今はdisplay: none;（ブートストラップから）に設定されているので、あなたのトグルクラスは何も変わりません。

  2. モーダル位置決め

    あなたのモーダル位置決めが道オフになっています。ポイント（1）で述べたcssのバグを変更した後は、あなたのモーダルが現れ、スクリーンから離れているので、決して見えません。位置を固定すると、意図したとおりに表示されます。

出典

2017-01-04 09:34:18 dommmm

+0

私はdisplay：blockを.modalに追加しましたが、ページがロードされ閉じるボタンが機能するとすぐにモーダルが中央に表示されますが、モーダル（情報）ボタンをクリックするとモーダルが実行されます再び表示されません。私が紛失しているものがありますか？ –

+0

それは私のために働く。モーダル情報ボタンがあるスライドの代わりに、最初のスライドにモーダルが表示されます。そのため、表示されません。あなたはポジショニングを修正する必要があります。 – dommmm

+0

それは動作します！＃モーダルオーバーレイはモーダルボックスで消えていなかったので、情報ボタンをクリックして表示させることはできませんでした。私はまた、位置を変更しました：絶対位置を.modalに固定してスライド内に残しました。 –

関連する問題

 関連する問題