利用jBox實現彈窗提示框插件下載



14 54 19



特效描述:利用jBox實現 彈窗 提示框 插件下載,利用jBox實現彈窗提示框插件下載

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" href="dist/jBox.all.css">
<link rel="stylesheet" href="css/Demo.css">
<link rel="stylesheet" href="Playground/Playground.Avatars.css">
<link rel="stylesheet" href="Playground/Playground.Login.css">

2. 引入JS

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="dist/jBox.all.js"></script>
<script src="js/Demo.js"></script>
<script src="Playground/Playground.Avatars.js"></script>
<script src="Playground/Playground.Login.js"></script>

3. HTML代碼

<main class="container">
<h2>Tooltip</h2>
<div class="targets-wrapper">
<div id="Tooltip-1" class="target">Hover me</div>
<div id="Tooltip-2" class="target">Hover me</div>
<div id="Tooltip-3" class="target">Hover me</div>
<div id="Tooltip-4" class="target">Hover me</div>
<div id="Tooltip-5" class="target">Hover me</div>
<div id="Tooltip-6" class="target">Hover me</div>
<div id="Tooltip-7" class="target-click">Click me</div>
<div id="Tooltip-8" class="target-click">Click me</div>
</div>
<h2>Modal</h2>
<div class="targets-wrapper">
<div id="Modal-1" class="target-click">Click me</div>
<div id="Modal-2" class="target-click">Click me</div>
<div id="Modal-3" class="target-click">Click me</div>
<div class="target-click" data-confirm onClick="new jBox('Notice', {content: 'Yay! You clicked the confirm button', color: 'green', attributes: {y: 'bottom'}})">Click me</div>
</div>
<h2>Notice</h2>
<div class="targets-wrapper">
<div id="Notice-1" class="target-notice">Click me</div>
<div id="Notice-2" class="target-notice">Click me</div>
<div id="Notice-3" class="target-notice">Click me</div>
<div id="Notice-4" class="target-notice">Click me</div>
<div id="Notice-5" class="target-notice">Click me</div>
<div id="Notice-6" class="target-notice">Click me</div>
<div id="Notice-7" class="target-notice">Click me</div>
<div id="Notice-8" class="target-notice">Click me</div>
</div>
<!---<h2>Image</h2>
<div class="targets-wrapper">
<a class="demo-img" href="https://stephanwagner.me/img/jBox/demo/image1.jpg" data-jbox-image="gallery1" title="Navigate with your keyboard: Press the [right] or [left] key"><img src="https://stephanwagner.me/img/jBox/demo/image1-preview.jpg" alt=""></a>
<a class="demo-img" href="https://stephanwagner.me/img/jBox/demo/image2.jpg" data-jbox-image="gallery1" title="jBox is smart, the next image gets preloaded"><img src="https://stephanwagner.me/img/jBox/demo/image2-preview.jpg" alt=""></a>
<a class="demo-img" href="https://stephanwagner.me/img/jBox/demo/image3.jpg" data-jbox-image="gallery1" title="You can easily group your images into galleries"><img src="https://stephanwagner.me/img/jBox/demo/image3-preview.jpg" alt=""></a>
<a class="demo-img" href="https://stephanwagner.me/img/jBox/demo/image4.jpg" data-jbox-image="gallery1" title="As usual, attaching jBox to images is easy as pie"><img src="https://stephanwagner.me/img/jBox/demo/image4-preview.jpg" alt=""></a>
<a href="https://stephanwagner.me/img/jBox/demo/NOT-FOUND.jpg" data-jbox-image="gallery1" title="You can adjust this image-not-found notice with CSS"></a>
</div>--->
<h2>Playground</h2>
<div class="targets-wrapper">
<div id="DemoAvatars" class="target-click">Click me</div>
<div id="DemoLogin" class="target-click">Click me</div>
</div>
</main>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 文字提示框 提示文字
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 wow70年法师怎么赚钱 福建快三中奖 新25选7开奖结果查询 陕体彩十一选五开奖结果 邢台麻将作弊器免费版 今年小本赚钱代理项目 北京时时彩开奖结果 河南快赢481 用蜜源怎么赚钱 mg游戏平台官网网址 北京赛车pk开奖结果 555彩票安卓 66鱼游戏赚钱 做保险销售赚钱的人占比 金沙线上娱乐11jsxs 真人诈金花可以提现的