Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > jQuery animated pop-up form supports multiple presentation methods_jquery

jQuery animated pop-up form supports multiple presentation methods_jquery

WBOY
Release： 2016-05-16 18:28:15
Original
1151 people have browsed it

jQuery animated pop-up form supports multiple presentation methods_jquery
Animation effect
It is triggered from which object, that is, starting from the object, it gradually moves to the middle of the screen and gradually expands. After expansion, the display objects inside slowly expand from top to bottom. When clicking to close, first slowly retract the expanded displayed object, and then slowly move it to the triggered object.
It’s a bit convoluted. I don’t even know what it means. To put it bluntly, it means going back and forth from where you are.
Display method
The first method: string
This is the simplest and clearest way. Needless to say, it is to directly assign the string value and display it.
The second type: ajax
This is a display that supports ajax, which is to obtain data asynchronously and display it.
　The third type: iframe
　As the name suggests, it supports nested iframe display.
　The fourth type: controls
　This name is a bit hard to understand, it is to display an object on the page. For example: document.getElementById("showName");
Plug-in code implementation

Copy code The code is as follows:

(function($){
$.alerts = {
alert : function(o,options){
var defaults = {
title : '标题',
content : '内容',
GetType : 'string', //controls,ajax,string,iframe
IsDrag : true,
Url : '',
Data : null,
width:400,
height:300,
callback : function(){}
}
var options = $.extend(defaults,options);
if(!$("#window")[0])
{
$.alerts._createObject();
}
var position = $.alerts._getPosition(o);
var winPosition = $.alerts._getWindowPosition(options);
$("#windowContent").hide();
$("#window").css(
{
width:position.w,
height:position.h,
top:position.t,
left:position.l,
zIndex:1001
}
);
$("#windowBottom,#windowBottomContent").css(
{
height:options.height-30
}
);
$("#windowContent").css(
{
height:options.height - 45,
width:options.width - 25
}
);
$("#windowTopContent").html(options.title);
switch(options.GetType){
case "string":
$("#windowContent").html(options.content);
break;
case "ajax":
if(options.Url == ''){
alert("AjaxUrl不能为空");
return;
}else{
$.ajax(
{
type: "POST",
url: options.Url,
data: options.Data,
success: function(msg){
$("#windowContent").html(msg);
}
}
);
}
break;
case "controls":
$("#windowContent").html(options.content.innerHTML);
break;
case "iframe":
$("#windowContent").empty();
$("