[jQuery插件] 弹出框

最新推荐文章于 2021-06-09 10:21:00 发布

LGF124241877

最新推荐文章于 2021-06-09 10:21:00 发布

阅读量125

点赞数

分类专栏： jquery 文章标签： jQuery ViewUI

本文链接：https://blog.csdn.net/LGF124241877/article/details/83975480

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

来源地[url]http://stefangabos.ro/jquery/zebra-dialog/[/url]
测试html文件主要代码


  <body>
		<button id="button1">click Me 1</button><br>
		<button id="button2">click Me 2</button><br>
		<button id="button3">click Me 3</button><br>
		<button id="button4">click Me 4</button><br>
		<button id="button5">click Me 5</button><br>
  </body>

测试js文件


$(function(){
	$("#button1").click(function(){
		$.Zebra_Dialog('<strong>Zebra_Dialog</strong>' + '可以加入html的提示框');
	});

	$("#button2").click(function(){
		$.Zebra_Dialog(	'<strong>Zebra_Dialog</strong> 可以设置标题和Dialog类型', 
    					{
   					 		'type':     'error',
   					 		'title':    'Error'
   					 	}
   					   );

	});

	$("#button3").click(function(){
		$.Zebra_Dialog('<strong>Zebra_Dialog</strong>', 
						{
    						'type':     'question',
    						'title':    'Custom buttons',
    						'buttons':  ['Yes', 'No', 'Help'],
    						'onClose':  function(caption) {
										alert("刚刚选择的是" + caption);
    								}
						}
		);
	});

	$("#button4").click(function(){
		$.Zebra_Dialog('<strong>Zebra_Dialog</strong>', 
						{
    						'title':    'Custom positioning',
    						'position': ['right - 20', 'top + 20']
						}
		);
	});


	$("#button5").click(function(){
		new $.Zebra_Dialog('<strong>Zebra_Dialog</strong> 2秒后自动消失',
							{
    							'buttons':  false,
  					  			'modal': false,
    							'position': ['right - 20', 'top + 20'],
    							'auto_close': 2000
							}
		);
	});
});

配置的参数如下(来源于官网)：
Configuration

All parameters are optional.
animation_speed integer

The speed, in milliseconds, by which the overlay and the dialog box will be animated when closing.

Default is 250
auto_close mixed

The number of milliseconds after which to automatically close the dialog box or FALSE to not automatically close the dialog box.

Default is FALSE.
buttons mixed

Use this for localization and for adding custom buttons.

If set to TRUE, the default buttons will be used, depending on the type of the dialog box: ['Yes', 'No'] for “question” type and ['Ok'] for the other dialog box types.

For custom buttons, use an array containing the captions of the buttons to display: ['My button 1', 'My button 2'].

Set to FALSE if you want no buttons.

Note that when the dialog box is closed as a result of clicking a button, the “onClose” event is triggered and the callback function (if any) receives as argument the caption of the clicked button.

See the comments for the “onClose” event below for more information.
vcenter_short_message boolean

Should short messages be vertically centered?

Default is TRUE.
keyboard boolean

When set to TRUE, pressing the ESC key will close the dialog box.

Default is TRUE.
message string

The message in the dialog box – this is passed as argument when the plugin is called.
modal boolean

When set to TRUE there will be a semitransparent overlay behind the dialog box, preventing users from clicking the page’s content.

Default is TRUE.
overlay_close boolean

Should the dialog box close when the overlay is clicked?

Default is TRUE.
overlay_opacity double

The opacity of the overlay (between 0 and 1)

Default is .9
position mixed

Position of the dialog box.

Can be either “center” (which would center the dialog box) or an array with 2 elements, in the form of ['horizontal_position +/- offset', 'vertical_position +/- offset'] (notice how everything is enclosed in quotes) where “horizontal_position” can be “left”, “right” or “center”, “vertical_position” can be “top”, “bottom” or “middle”, and “offset” represents an optional number of pixels to add/substract from the respective horizontal or vertical position.

Positions are relative to the viewport (the area of the browser that is visible to the user)!

Examples:

['left + 20', 'top + 20'] would position the dialog box in the top-left corner, shifted 20 pixels inside.

['right - 20', 'bottom - 20'] would position the dialog box in the bottom-right corner, shifted 20 pixels inside.

['center', 'top + 20'] would position the dialog box in center-top, shifted 20 pixels down.

Default is ['center', 'middle']
title string

Title of the dialog box

Default is “” (an empty string – no title)
type mixed

Dialog box type.

Can be any of the following:

- confirmation
- error
- information
- question
- warning

If you don’t want an icon, set the “type” property to FALSE.

By default, all types except “question” have a single button with the caption “Ok”; type “question” has two buttons, with the captions “Ok” and “Cancel” respectively.

Default is “information”.
width integer

Width of the dialog box

By default, the width of the dialog box is set in the CSS file. Use this property to override the default width at run-time.

Must be an integer, greater than 0. Anything else will instruct the script to use the default value, as set in the CSS file. Value should be no less than 200 for optimal output.

Default is 0 – use the value from the CSS file.
Events
onClose

Event fired when the dialog box is closed.

The callback function (if any) receives as argument the caption of the clicked button or boolean FALSE if the dialog box is closed by pressing the ESC key or by clicking on the overlay.
Public methods
close

Call this method to manually close the dialog box.

Must be called like $(element).data(‘Zebra_Dialog’).close()

下面带上测试的包html 和必须的js css文件