使用jquery制作弹出框效果

本文主要是使用jDialog插件实现的弹出框效果，代码十分简介，需要的小伙伴自己参考下吧。

非常不错的国产JS弹出框插件，由前端工程师alien开发，提供多种类型的自定义对话框，使用方法简单，浏览器兼容性好，支持的弹出框模式有：

alert：普通提示(警告)对话框

confirm：询问(确认)对话框

message：简单消息对话框(无title、无按钮)

iframe：在对话框中嵌入一个iframe

tip：带有小三角指向的小tip

dialog：最基础的自定义对话框

1. var jDialogId = []; 
2. (function ($) { 
3. $.jDialog = function (options) { 
4.  
5. var id = parseInt(Math.floor(Math.random() * 1000 + 1)); 
6. while ($.inArray(id, jDialogId) != -1) { 
7. id = parseInt(Math.floor(Math.random() * 1000 + 1)); 
8. } 
9. jDialogId.push(id); 
10.  
11. var defaults = { 
12. title:"", 
13. content: "这是一个JasUI-Dialog插件", 
14. width: 350, 
15. height: 0, 
16. timer: 0, 
17. showbuttons:false, 
18. buttons: [], 
19. okval: "确认", 
20. ok: function () { return false;}, 
21. cancelval: "取消", 
22. cancel: function () { return false; }, 
23. showclose:true, 
24. close: function () { }, 
25. theme:"" 
26. }; 
27. var options = $.extend(defaults, options); 
28. var _objdiv = "<div id='j-dialog-" + id + "' class='j-dialog "; 
29. if (options.theme != "") { 
30. _objdiv = _objdiv + "j-dialog-" + options.theme + "'>"; 
31. } else { 
32. _objdiv = _objdiv + "'>"; 
33. } 
34. _objdiv = _objdiv + "<div class='j-dialog-header'>"; 
35. if (options.showclose) { 
36. _objdiv = _objdiv + "<a href='javascript:void(0)' class='j-close j-dialog-close'></a>" 
37. }  
38. if (options.title != "") { 
39. _objdiv = _objdiv + "<h5 class='j-dialog-title'>" + options.title + "</h5>"; 
40. } 
41. _objdiv = _objdiv + "</div>"; 
42. _objdiv = _objdiv + "<p class='j-dialog-content'>" + options.content + "</p>"; 
43.  
44. if (options.showbuttons) { 
45. _objdiv = _objdiv + "<div class='j-dialog-footer'>"; 
46. $.each(options.buttons,function(i,value) {  
47. _objdiv = _objdiv + "<a class='j-button' data-id='" + i + "'>" + value.title + "</a>"; 
48. }) 
49. _objdiv = _objdiv + "<a class='j-button j-button-primary j-dialog-ok'>" + options.okval + "</a>"; 
50. _objdiv = _objdiv + "<a class='j-button j-dialog-cancel'>" + options.cancelval + "</a>"; 
51. _objdiv = _objdiv + "</div>"; 
52. }; 
53.  
54. _objdiv=_objdiv+"</div>"; 
55. $("body").append(_objdiv); 
56. var _obj = $('#j-dialog-' + id) 
57. if (options.height>0) { 
58. _obj.css("height", options.height); 
59. } 
60. _obj.css("width", options.width); 
61. _obj.css("margin-top", '-' + (options.height / 2) + 'px'); 
62. _obj.css("margin-left", '-' + (options.width / 2) + 'px'); 
63. _obj.animate({ top: '30%',opacity:1 }, 0); 
64. if (options.showclose) { 
65. _obj.find('.j-dialog-close').on('click', function () { 
66. $.jDialogRemove(id, options.close); 
67. }) 
68. _obj.find('.j-dialog-ok').on('click', function () { 
69. if (!options.ok()) { 
70. $.jDialogRemove(id, options.close); 
71. } 
72. }) 
73. _obj.find('.j-dialog-cancel').on('click', function () { 
74. if (!options.cancel()) { 
75. $.jDialogRemove(id, options.close); 
76. } 
77. }) 
78. } 
79. if (options.showbuttons) { 
80. $.each(options.buttons, function (i, value) { 
81. _obj.find("[data-id=" + i + "]").on('click', function () { 
82. if (!value.callback()) { 
83. $.jDialogRemove(id, options.close); 
84. } 
85. }) 
86. }) 
87. }; 
88. if (options.timer> 0) { 
89. setTimeout(function () { 
90. $.jDialogRemove(id,options.close); 
91. }, options.timer); 
92. } 
93. return id; 
94. }, 
95. $.jDialogRemove = function (id, callback) { 
96. if ($.inArray(id, jDialogId)!=-1) { 
97. jDialogId.splice($.inArray(id, jDialogId), 1); 
98. $('#j-dialog-' + id).animate({ top: '0', opacity: 0 }, 500, function () { 
99. $('#j-dialog-' + id).remove(); 
100. if (callback) { 
101. callback(); 
102. } 
103. }); 
104. } 
105. }, 
106. $.jTip = function (options) { 
107. var defaults = { 
108. content: "这是一个JasUI-Dialog插件", 
109. width: 200, 
110. timer: 0, 
111. showclose: false, 
112. close: function () { }, 
113. theme: "" 
114. }; 
115. var options = $.extend(defaults, options); 
116. $.jDialog(options); 
117. }, 
118. $.jFloatText = function (txt,color,posX,posY) { 
119. var $i = $("<b>").text(txt); 
120. var x = '50%', y = '40%'; 
121. var _color = '#E94F06'; 
122. if (color) { 
123. _color= color; 
124. } 
125. if (posX) { 
126. x = posX; 
127. } 
128. if (posY) { 
129. y = posY; 
130. } 
131. $i.css({ top: 200, left: x, position: "absolute", color: "#E94F06" }); 
132. $("body").append($i); 
133. $i.animate({ top: 20, opacity: 0}, 1500, function () { 
134. $i.remove(); 
135. }); 
136. } 
137.  
138. })(jQuery); 

以上所述就是本文的全部内容了，希望能够对大家熟练使用jQuery有所帮助。