Home  >  Article  >  Web Front-end  >  Method to modify the dialog box plug-in in jquery to a frame page (iframe)_jquery

Method to modify the dialog box plug-in in jquery to a frame page (iframe)_jquery

WBOY
WBOYOriginal
2016-05-16 18:19:441077browse

jquery has a very good ui plug-in, dialog plug-in, and there are various forms of demonstrations on its official website: http://jqueryui.com/demos/dialog/ , maybe The one that everyone uses more often is its default mode. The specific instructions are available on the Judge website, and there are also explanation addresses in Chinese. I won’t repeat them again. I have recently been working on a pop-up frame page. Take a closer look, and the dialog plug-in modal form The mode is very similar, the demo effect is: http://www.lovewebgames.com/addNews.aspx
Method to modify the dialog box plug-in in jquery to a frame page (iframe)_jquery
This is the effect, you need to log in Register the pop-up layer. As for why I don’t just use modal form to do it? Because I like it, you control me. So I made a plugin for the dialog under jquery, which needs to reference the original dialog file. The specific code is as follows:

Copy code The code is as follows:

(function ($) {
$.fn.openWidow = function (options) {
var divId = "dialog" Math.round(Math.random() * 100);
var settings = {
id: divId ,
width: 300,
height: 200,
modal: true,
buttons: {
},
show: "explode",
hide: "highlight" ,
title: "Prompt",
url: "/test.aspx",
close: function () {
$("#" this.id).remove();
//debugger
if (document.getElementById(this.id))
document.body.removeChild(document.getElementById(this.id));
}
};
if (options) {
$.extend(settings, options);
}
$("body").append('

');
// Dialog
$('#' settings.id).dialog({
autoOpen: false,
title: settings.title,
width: settings.width,
height: settings.height,
modal: true,
bgiframe: true,
show : settings.show,
hide: settings.hide,
buttons: settings.buttons,
close: settings.close,
open: function () {
$("#" settings .id).html('