iT邦幫忙

2

JQuery製作點擊Button出現Modal效果

在作專案的時候,大部分都是使用Bootstrap
這次就來使用JQuery製作點擊按鈕可彈出Youtube的影片

HTML

class命名開頭有js的部分則是要寫入js控制按鈕

<button id="js-startbtn" class="button">播放影片</button>

<div class="modal is-hide">
  <iframe width="80%" height="80%"  src="https://www.youtube.com/embed/IFTZtuXKzFs" frameborder="0" allowfullscreen></iframe>
  <a class="modal-close js-modal-close">X</a>
</div>

CSS(SCSS)

.button{
  outline: 0;
  border: 0;
  padding: 1em 3.5em;
  cursor: pointer;
  color: #fff;
  background-color: #ffb74d;
}

.modal{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,0.8);
  iframe{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    display:block;
  }
  .modal-close{
    cursor: pointer;
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 5px;
    color: #444;
    background-color: #fff;
  }
}

.is-hide{
  display: none;
}

JQuery

$(function(){
  var $modal = $('.modal');
  var HIDE_CLASS = 'is-hide';
  
  $('#js-startbtn').on('click',function(){
    $modal.removeClass(HIDE_CLASS);
  });
  
  $('.js-modal-close').on('click',function(){
    $modal.addClass(HIDE_CLASS);
  });
});

範例網址


1 則留言

6
marlin12
iT邦新手 3 級 ‧ 2018-09-13 20:44:47

另一個做modal效果的方法(只用CSS)
[HTML]

<a class="button" href="#popup1">show popup</a>
<a class="button" href="#">hide popup</a>
<div id="popup1" class="overlay">Popup message...</div>

[CSS]

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

CodePen - pure CSS popup box


其實還可以用YouTube Player API去把YouTube影片嵌入網頁裏,這方法可以設定播放器的功能和控制它的播放狀態。

嵌入播放器範例

CodePen - 在網頁裏控制嵌入影片的播放

CodePen - 在網頁裏控制嵌入影片的播放/暫停/停止

Homura iT邦研究生 3 級‧ 2018-09-13 20:48:02 檢舉

原來API有這些東西啊/images/emoticon/emoticon12.gif

挖賽 也是第一次看到 感覺好棒

我要留言

立即登入留言