彈跳視窗
A
settings_data.json
(main slider底下)
"index_popup_display": "true",
"index_popup_link_1": "",
B
settings.html
(跑馬燈下)
<!-- 首頁-彈出廣告區塊 -->
<div class="accordion-group">
<div class="accordion-heading">
<a href="#index_popup" data-parent="theme-settings-accordion" data-toggle="collapse" class="accordion-toggle collapsed">
首頁-彈出廣告區塊
</a>
</div>
<div class="accordion-body collapse" id="index_popup">
<div class="accordion-inner">
<h3>彈出廣告區塊</h3>
<table>
<tr>
<td><label for="index_popup_display">顯示彈出廣告區塊</label></td>
<td><input type="checkbox" id="index_popup_display" name="index_popup_display" /></td>
</tr>
<tr>
<td><label for="index_popup_link_1">廣告區塊連結</label></td>
<td><input type="text" id="index_popup_link_1" name="index_popup_link_1"/></td>
</tr>
<tr>
<td><label for="index_popup_image_1">上傳圖片<br><small style="color:#0071b2;">圖片建議尺寸寬度450px,高度450px,可上傳JPG/PNG/JPEG/GIF格式</small></label></td>
<td><input type="file" id="index_popup_image_1" name="img/index_popup_image_1.jpg" /></td>
</tr>
</table>
</div>
</div>
</div>
C
theme.liquid
<body style="display: flex; flex-direction: column; height: 100vh;"> 下方
{% include 'popup' %}
D
新增片段popup.liquid
<!-- Modal -->
{% if settings['index_popup_display'] %}
<div class="modal fade" id="salePop" tabindex="-1" role="dialog" aria-labelledby="saleLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<a href="{{ settings['index_popup_link_1'] }}">
<img src="{{ 'img/index_popup_image_1.jpg' | asset_url }}" alt="">
</a>
</div>
</div>
</div>
</div>
<style>
#salePop{
justify-content: center;
align-items: center;
}
#salePop.fade.show{
display: flex !important;
}
#salePop.fade{
display: none !important;
}
#salePop .modal-content{
border: none;
background-color: transparent;
}
#salePop .modal-body{
padding: 0px;
}
#salePop .modal-dialog{
margin: 50px 20px;
max-width: 768px;
max-height: 80vh;
}
#salePop .modal-body .close{
position: absolute;
top: -55px;
right: -110px;
width: 30px;
height: 30px;
background-color: white;
font-size: 16px;
border-radius: 40px;
border: 1px solid black;
opacity: 1;
}
#salePop .modal-body img{
max-width: 120%;
margin: -50px;
}
</style>
<script>
$(document).ready(function() {
var path = window.location.pathname;
if(path === '/'){
var isShow = store.get('salePop');
var expireTime = 86400 * 1000;
if(!isShow || isShow < new Date().getTime()){
$('#salePop').modal('show');
store.set('salePop', new Date().getTime() + expireTime);
}
}
});
</script>
{% endif %}
