jQuery Custombox是一個(gè)基于jQuery開發(fā)的彈窗插件,它可以幫助我們方便地創(chuàng)建各種類型的彈窗窗口,如模態(tài)框、警告框、提示框等等。
使用jQuery Custombox非常簡(jiǎn)單,只需要引入jQuery和Custombox的JS和CSS文件,然后定義一個(gè)HTML結(jié)構(gòu)即可。下面是一個(gè)基本的Custombox彈窗代碼實(shí)例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custombox Demo</title>
<link href="custombox.min.css" rel="stylesheet">
</head>
<body>
<h1>Custombox Demo</h1>
<button id="demo-btn">點(diǎn)擊打開彈窗</button>
<!-- 彈窗結(jié)構(gòu)定義 -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>這是一個(gè)彈窗!</p>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="custombox.min.js"></script>
<script>
$(document).ready(function(){
$("#demo-btn").click(function(){
Custombox.open({
target: '#myModal',
effect: 'fadein'
});
});
});
</script>
</body>
</html>
上述代碼中,我們定義了一個(gè)按鈕來(lái)觸發(fā)彈窗,然后在HTML界面中定義了一個(gè)模態(tài)框彈窗的結(jié)構(gòu)。在JavaScript中,當(dāng)點(diǎn)擊按鈕時(shí),我們使用Custombox的open()方法來(lái)打開模態(tài)框彈窗,并通過(guò)配置一些選項(xiàng)來(lái)指定模態(tài)框彈窗的效果。
更多關(guān)于jQuery Custombox的信息和用法可以參考官方文檔:http://dixso.github.io/custombox/