JQuery製作點擊Button出現Modal效果

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

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

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

<div>
<iframe width=”80%” height=”80%”  src=”https://www.youtube.com/embed/IFTZtuXKzFs

” frameborder=”0″ allowfullscreen></iframe>
<a>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);
});
});
範例網址