這款彈出框插件是本人自己模仿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í)行"); } } }});確認框按鈕可以放置多個
效果展示


是不是使用起來非常簡單 -_-
下載鏈接:https://pan.baidu.com/s/1pLJJky3
以上所述是小編給大家介紹的jQuery仿IOS彈出框插件,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持!
新聞熱點
疑難解答