对话框/Tips

notie - 简单纯JavaScript消息提示插件

阿里云

notie.js 是一款简单实用的纯 JavaScript 消息提示插件。通过 notie.js 插件你可以制作 Alert 提示框,确认框和带输入的消息框。它使用纯 JavaScript 制作,没有任何外部依赖。它的特点还有:

纯 JavaScript 制作,没有外部依赖,只需引入一个 js 文件

也想出现在这里?联系我们
创客主机

可以在所有现代浏览器中正常工作(Chrome, Firefox, Safari, IE9+, Edge, Opera)

易于定制

可以修改颜色

字体大小会根据屏幕大小自动调整

样式可以通过单独的 CSS 文件来重写

使用方法:

使用该 jQuery 图表插件需要引入 notie.js 文件。

  1. <script src="js/notie.js"></script>

调用插件:

下面是 notie.js 调用 Alert 提示框,确认框和带输入的消息框的方法。

  1. notie.alert(style_number, 'message', time_in_seconds);
  2. notie.confirm('Title text', 'Yes button text', 'No button text', yes_callback)
  3. notie.input('Title text', 'Submit button text', 'Cancel button text', 'type', 'placeholder', submit_callback, 'Optional pre-filled value');

例如:

  1. notie.alert(1, 'Success!', 1.5);
  2. notie.alert(2, 'Warning<br><b>with</b><br><i>HTML</i><br><u>included.</u>', 2);
  3. notie.alert(3, 'Error.', 2.5);
  4. notie.alert(4, 'Information.', 2);
  5.  
  6. notie.confirm('Are you sure you want to do that?', 'Yes', 'Cancel', function() {
  7.     notie.alert(1, 'Good choice!', 2);
  8. });
  9. notie.confirm('Are you sure?', 'Yes', 'Cancel', function() {
  10.     notie.confirm('Are you <b>really</b> sure?', 'Yes', 'Cancel', function() {
  11.         notie.confirm('Are you really <b>really</b> sure?', 'Yes', 'Cancel', function() {
  12.             notie.alert(1, 'Okay, jeez...', 2);
  13.         });
  14.     });
  15. });
  16.  
  17. notie.input('Please enter your email address:', 'Submit', 'Cancel', 'email', 'name@example.com', function(value_entered) {
  18.     notie.alert(1, 'You entered: ' + value_entered, 2);
  19. });
  20. notie.input('What city do you live in?', 'Submit', 'Cancel', 'text', 'Enter your city:', function(value_entered) {
  21.     notie.alert(1, 'You entered: ' + value_entered, 2);
  22. }, 'New York');

配置参数:

下面是 notie.js 的一些可用配置参数:

  1. //通用
  2. var shadow = true;
  3. var font_size_small = '18px';
  4. var font_size_big = '24px';
  5. var font_change_screen_width = 600;
  6. var animation_delay = 0.3;
  7. var background_click_dismiss = true;
  8.  
  9. // notie.alert colors
  10. var alert_color_success_background = '#57BF57';
  11. var alert_color_warning_background = '#E3B771';
  12. var alert_color_error_background = '#E1715B';
  13. var alert_color_info_background = '#4D82D6';
  14. var alert_color_text = '#FFF';
  15.  
  16. // notie.confirm colors
  17. var confirm_and_input_color_background = '#4D82D6';
  18. var confirm_and_input_color_yes_background = '#57BF57';
  19. var confirm_and_input_color_no_background = '#E1715B';
  20. var confirm_and_input_color_text = '#FFF';
  21. var confirm_and_input_color_yes_text = '#FFF';
  22. var confirm_and_input_color_no_text = '#FFF';
  23.  
  24. // (Be sure to use !important to override the javascript)
  25. // Example: #notie-alert-inner { padding: 30px !important; }
  26. var alert_outer_id = 'notie-alert-outer';
  27. var alert_inner_id = 'notie-alert-inner';
  28. var alert_text_id = 'notie-alert-text';
  29. var confirm_outer_id = 'notie-confirm-outer';
  30. var confirm_inner_id = 'notie-confirm-inner';
  31. var confirm_backdrop_id = 'notie-confirm-backdrop';
  32. var confirm_yes_id = 'notie-confirm-yes';
  33. var confirm_no_id = 'notie-confirm-no';
  34. var confirm_text_id = 'notie-confirm-text';
  35. var confirm_yes_text_id = 'notie-confirm-yes-text';
  36. var confirm_no_text_id = 'notie-confirm-no-text';
  37. var input_outer_id = 'notie-input-outer';
  38. var input_inner_id = 'notie-input-inner';
  39. var input_backdrop_id = 'notie-input-backdrop';
  40. var input_div_id = 'notie-input-div';
  41. var input_field_id = 'notie-input-field';
  42. var input_yes_id = 'notie-input-yes';
  43. var input_no_id = 'notie-input-no';
  44. var input_text_id = 'notie-input-text';
  45. var input_yes_text_id = 'notie-input-yes-text';
  46. var input_no_text_id = 'notie-input-no-text';

notie - 简单纯 JavaScript 消息提示插件

已有 509 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!