欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery仿IOS彈出框插件

 更新時(shí)間:2017年02月18日 09:34:49   投稿:mrr  
這款彈出框插件是本人自己模仿IOS原生彈出框?qū)懙囊粋€(gè)自定義插件,包括Alert彈出框和Confirm確認(rèn)框,支持標(biāo)題,內(nèi)容,按鈕文字以及按鈕回調(diào)函數(shù)自定義,使用非常簡單,本文給大家介紹了jQuery仿IOS彈出框插件,需要的朋友可以參考下

這款彈出框插件是本人自己模仿IOS原生彈出框?qū)懙囊粋€(gè)自定義插件,包括Alert彈出框和Confirm確認(rèn)框,支持標(biāo)題,內(nèi)容,按鈕文字以及按鈕回調(diào)函數(shù)自定義,使用非常簡單,可以進(jìn)行擴(kuò)展,下面是插件使用方法,一看就懂:

首先導(dǎo)入jquery庫和插件庫以及css文件

<script src="./jquery-1.8.3.min.js"></script>
<script src="./jquery.confirm-1.1.js"></script>
<link href="./jquery.confirm-1.1.css" rel="external nofollow" rel='stylesheet' type='text/css' />

Alert彈出框快速使用

$.alert('Are you sure to continue?'); --內(nèi)容支持html代碼
$.alert({
 title: 'Alert彈出框!', --標(biāo)題 默認(rèn)標(biāo)題(溫馨提示)
 content: 'Are you sure to continue?', --內(nèi)容
});

Alert回調(diào)彈出框使用

$.alert({
 title: 'Alert回調(diào)彈出框!',
 content: 'alert帶回調(diào)函數(shù),點(diǎn)擊確定按鈕觸發(fā)回調(diào)函數(shù)',
 buttons: {
  ok: {
   text: '好', --按鈕標(biāo)題
   action: function () { --回調(diào)事件
     alert("按鈕回調(diào)函數(shù)被執(zhí)行");
   }
  }
 }
});

Confirm確認(rèn)框使用

$.confirm('Are you sure to continue?');
$.confirm({
 title: 'Confirm確認(rèn)框!', 
 content: 'Are you sure to continue?', 
});

Confirm回調(diào)確認(rèn)框使用

$.alert({
 title: 'Confirm回調(diào)確認(rèn)框!',
 content: 'Confirm確認(rèn)框,點(diǎn)擊按鈕觸發(fā)回調(diào)函數(shù)',
 buttons: {
  ok: { --確定按鈕
   text: '確定',
   action: function () {
     alert("確定按鈕回調(diào)函數(shù)被執(zhí)行");
   }
  },
  close: { --關(guān)閉按鈕
   text: '關(guān)閉',
   action: function () {
     alert("關(guān)閉按鈕回調(diào)函數(shù)被執(zhí)行");
   }
  }
 }
});

確認(rèn)框按鈕可以放置多個(gè)

效果展示

彈出窗口效果圖

確認(rèn)彈出框效果圖

是不是使用起來非常簡單 -_-

下載鏈接:https://pan.baidu.com/s/1pLJJky3

以上所述是小編給大家介紹的jQuery仿IOS彈出框插件,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

最新評論