2017-05-12 62 views
1

我一直在試圖讓我的模式框停止消失,但我所做的沒有任何工作。我甚至使用了我在網上看到的一些線程的解決方案,但他們不工作。我如何避免它消失?即使我刪除了其他bootstrap.min.js,模式框仍會消失

這是我的代碼:

<html> 

    <head> 

    <title> Test Slides </title> 

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

    <style type="text/css"> 


    .carousel-control { 
    padding-top:10%; 
    width:5%; 
    } 
    /* Video icon overlay on image */ 
    .videos img { 
    width:100%; 
    height:auto; 
    } 
    a.video { 
    float: left; 
    position: relative; 
} 
a.video span { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    background: url("images/lightbox-play.png") no-repeat; 
    background-position: 50% 50%; 
    background-size: 15%; 
} 
@media screen and (max-width: 480px) { 
    a.video span { 
    background-size: 400%; 
    } 
} 
/* gutter spaces */ 
.row.no-gutter [class*='col-']:not(:first-child), 
.row.no-gutter [class*='col-']:not(:last-child) { 
    padding-right:0; 
    padding-left:0; 
} 

.row.no-gutter { 
    margin-left: 0; 
    margin-right: 0; 
} 
    /* Style the Image Used to Trigger the Modal */ 
#myImg { 
    border-radius: 5px; 
    cursor: pointer; 
    transition: 0.3s; 
} 

#myImg:hover {opacity: 0.7;} 

/* The Modal (background) */ 
.modal { 
    display: none; /* Hidden by default */ 
    position: fixed; /* Stay in place */ 
    z-index: 1; /* Sit on top */ 
    padding-top: 100px; /* Location of the box */ 
    left: 0; 
    top: 0; 
    width: 100%; /* Full width */ 
    height: 100%; /* Full height */ 
    overflow: auto; /* Enable scroll if needed */ 
    background-color: rgb(0,0,0); /* Fallback color */ 
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ 
} 

/* Modal Content (Image) */ 
.modal-content { 
    margin: auto; 
    display: block; 
    width: 80%; 
    max-width: 700px; 
} 

/* Modal Video*/ 
.modal iframe { 

    position: absolute; 
    left: 20%; 
    top: 10%; 

} 

/* Add Animation - Zoom in the Modal */ 
.modal-content, #caption { 
    -webkit-animation-name: zoom; 
    -webkit-animation-duration: 0.6s; 
    animation-name: zoom; 
    animation-duration: 0.6s; 
} 

@-webkit-keyframes zoom { 
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)} 
} 

@keyframes zoom { 
    from {transform:scale(0)} 
    to {transform:scale(1)} 
} 

/* The Close Button */ 
.close { 
    position: absolute; 
    top: 15px; 
    right: 35px; 
    color: #f1f1f1; 
    font-size: 40px; 
    font-weight: bold; 
    transition: 0.3s; 
} 

.close:hover, 
.close:focus { 
    color: #bbb; 
    text-decoration: none; 
    cursor: pointer; 
} 

/* 100% Image Width on Smaller Screens */ 
@media only screen and (max-width: 700px){ 
    .modal-content { 
     width: 100%; 
    } 
} 

    </style> 

    </head> 

    <body> 

    <div class="container-fluid"> 
    <div class="col-md-12"> 
     <h1>Nerdic Consult</h1> 

      <div id="myCarousel" class="carousel slide"> 

       <!-- Carousel items --> 
       <div class="carousel-inner"> 
        <div class="item active"> 
         <div class="row no-gutter"> 
          <div id="myImg1" class="col-sm-3 videos"><a href="" class="video"><span></span><img src="images/image 1.jpg" alt="Image" class="img-responsive"></a> 
          </div> 
          <div class="col-sm-3 videos"><a href="" class="video"><span></span><img src="images/image 2.jpg" alt="Image" class="img-responsive"></a> 
          </div> 
          <div class="col-sm-3 videos"><a href="" class="video"><span></span><img src="images/image 3.jpg" alt="Image" class="img-responsive"></a> 
          </div> 
          <div class="col-sm-3 videos"><a href="" class="video"><span></span><img src="images/image 4.jpg" alt="Image" class="img-responsive"></a> 
          </div> 
         </div> 
         <!--/row--> 
        </div> 
        <!--/item--> 
        <div class="item"> 
         <div class="row no-gutter"> 
          <div class="col-sm-3 videos"><a href="" class="video"><span></span><img src="images/image 5.jpg" alt="Image" class="img-responsive"></a> 
          </div> 
          <div class="col-sm-3 videos"><a href="" class="video"><span></span><img src="images/image 6.jpg" alt="Image" class="img-responsive"></a> 
          </div> 
          <div class="col-sm-3 videos"><a href="" class="video"><span></span><img src="images/image 7.jpg" alt="Image" class="img-responsive"></a> 
          </div> 
          <div class="col-sm-3 videos"><a href="" class="video"><span></span><img src="images/image 8.jpg" alt="Image" class="img-responsive"></a> 
          </div> 
         </div> 
         <!--/row--> 
        </div> 
        <!--/item--> 
       </div> 
       <!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><img src="images/lightbox-prev.png"/></a> 

       <a class="right carousel-control" href="#myCarousel" data-slide="next"><img src="images/lightbox-next.png"/></a> 
      </div> 
      <!--/myCarousel--> 

      <!-- The Modal --> 
<div id="myModal1" class="modal"> 

    <!-- The Close Button --> 
    <span class="close" onclick="document.getElementById('myModal1').style.display='none'">&times;</span> 

    <!-- Modal Content (The Video) --> 
    <iframe width="60%" height="60%" src="https://www.youtube.com/embed/AhTbZTLkIIs" frameborder="0" allowfullscreen=""></iframe> 

</div> 
    </div> 


</div> 

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 

    <script type="text/javascript"> 

    $(document).ready(function() { 
    $('#myCarousel').carousel({ 
    interval: 10000 
    }) 

    $('#myCarousel').on('slid.bs.carousel', function() { 
     //alert("slid"); 
    }); 


}); 

// Get the modal 
var modal = document.getElementById('myModal1'); 

// Get the image and insert it inside the modal - use its "alt" text as a caption 
var img = document.getElementById('myImg1'); 
img.onclick = function(){ 
    modal.style.display = "block"; 
    modalImg.src = this.src; 
    captionText.innerHTML = this.alt; 
} 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 

    </script> 

    </body> 
</html> 
+0

你想達到什麼目的? –

+0

鑑於您已經加載了jQuery(因爲它是Bootstrap的依賴項),您爲什麼使用getElementById等? –

回答

1

非常感謝你,沒有必要多此一舉。我發現它是負責的錨標記中的href。我刪除了錨標記中的href="",並保留模態框。

+0

歡迎在網站上 - 謝謝你回答你的問題。 – peterh

相關問題