# jquery model dialog box
##### [source : https://jsfiddle.net/softm/3qgu8fz2/ ](https://jsfiddle.net/softm/3qgu8fz2/)
```javascript
var $dialog = null;
jQuery.showModalDialog = function (options) {
var defaultOptns = {
url: null,
dialogArguments: null,
height: 'auto',
width: 'auto',
position: 'center',
resizable: true,
scrollable: true,
onClose: function () {},
returnValue: null,
doPostBackAfterCloseCallback: false,
postBackElementId: null
};
var fns = {
close: function () {
opts.returnValue = $dialog.returnValue;
$dialog = null;
opts.onClose();
if (opts.doPostBackAfterCloseCallback) {
postBackForm(opts.postBackElementId);
}
},
adjustWidth: function () {
$frame.css("width", "100%");
}
};
var opts = $.extend({}, defaultOptns, options);
var $frame = $('<iframe id="iframeDialog" />');
if (opts.scrollable) $frame.css('overflow', 'auto');
$frame.css({
'padding': 0,
'margin': 0,
'padding-bottom': 10
});
var $dialogWindow = $frame.dialog({
autoOpen: true,
modal: true,
width: opts.width,
height: opts.height,
resizable: opts.resizable,
position: opts.position,
overlay: {
opacity: 0.5,
background: "black"
},
close: fns.close,
resizeStop: fns.adjustWidth
});
$frame.attr('src', opts.url);
fns.adjustWidth();
$frame.load(function () {
if ($dialogWindow) {
var maxTitleLength = 50;
var title = $(this).contents().find("title").html();
if (title.length > maxTitleLength) {
title = title.substring(0, maxTitleLength) + '...';
}
$dialogWindow.dialog('option', 'title', title);
}
});
$dialog = new Object();
$dialog.dialogArguments = opts.dialogArguments;
$dialog.dialogWindow = $dialogWindow;
$dialog.returnValue = null;
}
function postBackForm(targetElementId) {
var theform;
theform = document.forms[0];
theform.__EVENTTARGET.value = targetElementId;
theform.__EVENTARGUMENT.value = "";
theform.submit();
}
// function to open THE POPUP
var inc = 1;
function test() {
while (inc <= 2) {
// debugger;
if (inc == 1) {
var url = '/PHX2Y/';
$.showModalDialog({
url: url,
dialogArguments: 'First Dialog',
height: 300,
width: 400,
scrollable: false,
onClose: function () {
var returnedValue = this.returnValue;
}
});
}
if (inc == 2) {
var url = '/2vbTn/';
$.showModalDialog({
url: url,
dialogArguments: 'Second Dialog',
height: 300,
width: 400,
scrollable: false,
onClose: function () {
var returnedValue = this.returnValue;
}
});
}
inc = inc + 1;
}
}
```
'web > javascript' 카테고리의 다른 글
| Node.js (0) | 2019.07.21 |
|---|---|
| Fullscreen (0) | 2019.07.19 |
| d3 data return (0) | 2019.07.17 |
| d3js - enter(), update() and exit() (0) | 2019.07.16 |
| Javascript Slider (0) | 2019.07.16 |
댓글