jQuery 弹窗插件 Simple Popup
Simple Popup
如果你厌倦了简单粗暴的Alert和Confirm()，请试试更轻量更易定制的Simple Popup
Demo
Usage
-
jQuery version
- Firstly, introduce jQuery(1.5+) into your page.
- Then, introduce assets(js + css) of Simple Popup into your page.
- Finally, replace any alert(), confirm() and prompt() method in page with simplePopup() method on page.
-
native javascript version
- First, introduce assets(js + css, obviously, both of the two version use the same css file) of Simple Popup into your page.
- Then, replace any alert(), confirm() and prompt() method in page with simplePopup()
built-in alert box
alert('An exception occurred.'); event.target.nextElementSibling.textContent = 'The application has just got an exception.';Simple Popup alternative of jquery version
var alertBox = simplePopup(0, 'An exception occurred.'); $.when(alertBox).then(function() { $(event.target).next().text('The application has just got an exception.'); });Simple Popup alternative of javascript version
simplePopup(0, 'An exception occurred.').then(function() { event.target.nextElementSibling.textContent = 'The application has just got an exception.'; });built-in prompt box
var res = confirm('It\'s time to change. Do you agree with me?'); if (res) { event.target.nextElementSibling.textContent = 'Yes, let\'s go for it.'; } else { event.target.nextElementSibling.textContent = 'No, this is not the time.'; }Simple Popup alternative of jquery version
var confirmBox = simplePopup(1, 'It\'s time to change. Do you agree with me?'); $.when(confirmBox).then(function(res) { if (res) { $(event.target).next().text('Yes, let\'s go for it.'); } else { $(event.target).next().text('No, this is not the time.'); } });Simple Popup alternative of javascript version
simplePopup(1, 'It\'s time to change. Do you agree with me?').then(function(res) { if (res) { event.target.nextElementSibling.textContent = 'Yes, let\'s go for it.'; } else { event.target.nextElementSibling.textContent = 'No, this is not the time.'; } });built-in prompt box
var username = prompt('Please enter your username', 'Michael Jordan'); if (username != null && username != '') { event.target.nextElementSibling.textContent = username + ', hey, welcome back.'; }Simple Popup alternative of jquery version
var promptBox = simplePopup(2, 'Please enter your username', 'Michael Jordan'); $.when(promptBox).then(function(res) { if (res) { $(event.target).next().text(res + ', hey, welcome back.'); } else { $(event.target).next().text('Anoymous user logs in.'); } });Simple Popup alternative of javascript version
simplePopup(2, 'Please enter your username', 'Michael Jordan').then(function(res) { if (res) { event.target.nextElementSibling.textContent = res + ', hey, welcome back.'; } else { event.target.nextElementSibling.textContent = 'Anoymous user logs in.'; } });killer Feature
- When you toggle the popup boxes with simpelPopup() method, the overlayed background keeps its position just where it was.
- As you can see above, this plugin help you rewrite the current code With the least code modifications.
Browser Support
1. Simple Popup of jquery version
- Chrome 8.0+
- Firefox 3.6+
- Safari 3.1.2+
- Opera 9.64+
2. Simple Popup of javascript version
- Chrome 32.0+
- Firefox 29.0+
- Safari 7.1+
- Opera 19+
本文由用户 jopen 自行上传分享，仅供网友学习交流。所有权归原作者，若您的权利被侵害，请联系管理员。
转载本站原创文章，请注明出处，并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台，欢迎各类分享！