這次就來使用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);
});
});
範例網址
转载请注明:XAMPP中文组官网 » JQuery製作點擊Button出現Modal效果