jQuery仿IOS彈出框插件

2019-11-19 17:31:18

字體：大中小

供稿：網(wǎng)友

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

首先導(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)題 默認標(biāo)題（溫馨提示） content: 'Are you sure to continue?', --內(nèi)容});

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

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

Confirm確認框使用

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

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

$.alert({ title: 'Confirm回調(diào)確認框!', content: 'Confirm確認框，點擊按鈕觸發(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í)行");   }  } }});

確認框按鈕可以放置多個

效果展示

彈出窗口效果圖