$('#index').live('pagebeforeshow',function(e,data){
$('#test-button').live('click', function(e) {
$('#confirmDialog').css('overflow-y', 'scroll');
$('#confirmDialog').popup('open');
});
});
$('#confirmDialog').on({
popupbeforeposition: function() {
var maxHeight = $(window).height() - 30;
$('#confirmDialog').css('max-height', maxHeight + 'px');
}
})
$( "#confirmDialog" ).enhanceWithin().popup();
(function($, undefined ) {
$.widget( "mobile.simpledialog2", $.mobile.widget, {
options: {
version: '1.0.1-2012061300', // jQueryMobile-YrMoDaySerial
mode: 'blank', // or 'button'
themeDialog: 'b',
themeInput: false,
themeButtonDefault: false,
themeHeader: 'a',
fullScreen: false,
fullScreenForce: false,
dialogAllow: false,
dialogForce: false,
headerText: false,
headerClose: false,
buttonPrompt: false,
buttonInput: false,
buttonInputDefault: false,
buttonPassword: false,
blankContent: false,
blankContentAdopt: false,
resizeListener: true,
safeNuke: true,
forceInput: true,
showModal: true,
animate: true,
transition: 'pop',
clickEvent: 'click',
zindex: '500',
width: '280px',
left: false,
top: false,
callbackOpen: false,
callbackOpenArgs: [],
callbackClose: false,
callbackCloseArgs: []
},
_eventHandler: function(e,p) {
// Handle the triggers
var self = e.data.widget,
o = e.data.widget.options;
if ( ! e.isPropagationStopped() ) {
switch (p.method) {
case 'close':
self.close();
break;
case 'html':
self.updateBlank(p.source);
break;
}
}
},
_create: function () {
var self = this,
o = $.extend(this.options, this.element.jqmData('options')),
initDate = new Date(),
content = $("<div class='ui-simpledialog-container ui-overlay-shadow ui-corner-all ui-simpledialog-hidden " +
((o.animate === true) ? o.transition : '') + " ui-body-" + o.themeDialog + "'></div>");
if ( o.themeButtonDefault === false ) { o.themeButtonDefault = o.themeDialog; }
if ( o.themeInput === false ) { o.themeInput = o.themeDialog; }
$.mobile.sdCurrentDialog = self;
if ( typeof $.mobile.sdLastInput !== 'undefined' ) { delete $.mobile.sdLastInput; }
self.internalID = initDate.getTime();
self.displayAnchor = $.mobile.activePage.children('.ui-content').first();
if ( self.displayAnchor.length === 0 ) { self.displayAnchor = $.mobile.activePage; }
self.dialogPage = $("<div data-role='dialog' data-theme='" + o.themeDialog + "'><div data-role='header'></div><div data-role='content'></div></div>");
self.sdAllContent = self.dialogPage.find('[data-role=content]');
content.appendTo(self.sdAllContent);
self.sdIntContent = self.sdAllContent.find('.ui-simpledialog-container');
self.sdIntContent.css('width', o.width);
if ( o.headerText !== false || o.headerClose !== false ) {
self.sdHeader = $('<div style="margin-bottom: 4px;" class="ui-header ui-bar-'+o.themeHeader+'"></div>');
if ( o.headerClose === true ) {
$("<a class='ui-btn-left' rel='close' href='#'>Close</a>").appendTo(self.sdHeader).buttonMarkup({ theme : o.themeHeader, icon : 'delete', iconpos: 'notext', corners: true, shadow : true });
}
$('<h1 class="ui-title">'+((o.headerText !== false)?o.headerText:'')+'</h1>').appendTo(self.sdHeader);
self.sdHeader.appendTo(self.sdIntContent);
}
if ( o.mode === 'blank' ) {
if ( o.blankContent === true ) {
if ( o.blankContentAdopt === true ) {
o.blankContent = self.element.children();
} else {
o.blankContent = self.element.html();
}
}
$(o.blankContent).appendTo(self.sdIntContent);
} else if ( o.mode === 'button' ) {
self._makeButtons().appendTo(self.sdIntContent);
}
self.sdIntContent.appendTo(self.displayAnchor.parent());
self.dialogPage.appendTo( $.mobile.pageContainer )
.page().css('minHeight', '0px').css('zIndex', o.zindex);
if ( o.animate === true ) { self.dialogPage.addClass(o.transition); }
self.screen = $("<div>", {'class':'ui-simpledialog-screen ui-simpledialog-hidden'})
.css('z-index', (o.zindex-1))
.appendTo(self.displayAnchor.parent())
.bind(o.clickEvent, function(event){
if ( !o.forceInput ) {
self.close();
}
event.preventDefault();
});
if ( o.showModal ) { self.screen.addClass('ui-simpledialog-screen-modal'); }
$(document).bind('simpledialog.'+self.internalID, {widget:self}, function(e,p) { self._eventHandler(e,p); });
},
_makeButtons: function () {
var self = this,
o = self.options,
buttonHTML = $('<div></div>'),
pickerInput = $("<div class='ui-simpledialog-controls'><input class='ui-simpledialog-input ui-input-text ui-shadow-inset ui-corner-all ui-body-"+o.themeInput+"' type='"+((o.buttonPassword===true)?"password":"text")+"' value='"+((o.buttonInputDefault!==false)?o.buttonInputDefault.replace( '"', """ ).replace( "'", "'" ):"")+"' name='pickin' /></div>"),
pickerChoice = $("<div>", { "class":'ui-simpledialog-controls' });
if ( o.buttonPrompt !== false ) {
self.buttonPromptText = $("<p class='ui-simpledialog-subtitle'>"+o.buttonPrompt+"</p>").appendTo(buttonHTML);
}
if ( o.buttonInput !== false ) {
$.mobile.sdLastInput = "";
pickerInput.appendTo(buttonHTML);
pickerInput.find('input').bind('change', function () {
$.mobile.sdLastInput = pickerInput.find('input').first().val();
self.thisInput = pickerInput.find('input').first().val();
});
}
pickerChoice.appendTo(buttonHTML);
self.butObj = [];
$.each(o.buttons, function(name, props) {
props = $.isFunction( props ) ? { click: props } : props;
props = $.extend({
text : name,
id : name + self.internalID,
theme : o.themeButtonDefault,
icon : 'check',
iconpos: 'left',
corners: 'true',
shadow : 'true',
args : [],
close : true
}, props);
self.butObj.push($("<a href='#'>"+name+"</a>")
.appendTo(pickerChoice)
.attr('id', props.id)
.buttonMarkup({
theme : props.theme,
icon : props.icon,
iconpos: props.iconpos,
corners: props.corners,
shadow : props.shadow
}).unbind("vclick click")
.bind(o.clickEvent, function() {
if ( o.buttonInput ) { self.sdIntContent.find('input [name=pickin]').trigger('change'); }
var returnValue = props.click.apply(self, $.merge(arguments, props.args));
if ( returnValue !== false && props.close === true ) {
self.close();
}
})
);
});
return buttonHTML;
},
_getCoords: function(widget) {
var self = widget,
docWinWidth = $.mobile.activePage.width(),
docWinHighOff = $(window).scrollTop(),
docWinHigh = $(window).height(),
diaWinWidth = widget.sdIntContent.innerWidth(),
diaWinHigh = widget.sdIntContent.outerHeight(),
coords = {
'high' : $(window).height(),
'width' : $.mobile.activePage.width(),
'fullTop' : $(window).scrollTop(),
'fullLeft': $(window).scrollLeft(),
'winTop' : docWinHighOff + ((widget.options.top !== false) ? widget.options.top : (( docWinHigh / 2 ) - ( diaWinHigh / 2 ) )),
'winLeft' : ((widget.options.left !== false) ? widget.options.left : (( docWinWidth / 2 ) - ( diaWinWidth / 2 ) ))
};
if ( coords.winTop < 45 ) { coords.winTop = 45; }
return coords;
},
_orientChange: function(e) {
var self = e.data.widget,
o = e.data.widget.options,
coords = e.data.widget._getCoords(e.data.widget);
e.stopPropagation();
if ( self.isDialog === true ) {
return true;
} else {
if ( o.fullScreen === true && ( coords.width < 400 || o.fullScreenForce === true ) ) {
self.sdIntContent.css({'border': 'none', 'position': 'absolute', 'top': coords.fullTop, 'left': coords.fullLeft, 'height': coords.high, 'width': coords.width, 'maxWidth': coords.width }).removeClass('ui-simpledialog-hidden');
} else {
self.sdIntContent.css({'position': 'absolute', 'top': coords.winTop, 'left': coords.winLeft}).removeClass('ui-simpledialog-hidden');
}
}
},
repos: function() {
var bsEvent = { data: {widget:this}, stopPropagation: function () { return true; }};
this._orientChange(bsEvent);
},
open: function() {
var self = this,
o = this.options,
coords = this._getCoords(this);
self.sdAllContent.find('.ui-btn-active').removeClass('ui-btn-active');
self.sdIntContent.delegate('[rel=close]', o.clickEvent, function (e) { e.preventDefault(); self.close(); });
if ( ( o.dialogAllow === true && coords.width < 400 ) || o.dialogForce ) {
self.isDialog = true;
if ( o.mode === 'blank' ) { // Custom selects do not play well with dialog mode - so, we turn them off.
self.sdIntContent.find('select').each(function () {
$(this).jqmData('nativeMenu', true);
});
}
self.displayAnchor.parent().unbind("pagehide.remove");
self.sdAllContent.append(self.sdIntContent);
self.sdAllContent.trigger('create');
if ( o.headerText !== false ) {
self.sdHeader.find('h1').appendTo(self.dialogPage.find('[data-role=header]'));
self.sdIntContent.find('.ui-header').empty().removeClass();
}
if ( o.headerClose === true ) {
self.dialogPage.find('.ui-header a').bind('click', function () {
setTimeout("$.mobile.sdCurrentDialog.destroy();", 1000);
});
} else {
self.dialogPage.find('.ui-header a').remove();
}
self.sdIntContent.removeClass().css({'top': 'auto', 'width': 'auto', 'left': 'auto', 'marginLeft': 'auto', 'marginRight': 'auto', 'zIndex': o.zindex});
$.mobile.changePage(self.dialogPage, {'transition': (o.animate === true) ? o.transition : 'none'});
} else {
self.isDialog = false;
self.selects = [];
if ( o.fullScreen === false ) {
if ( o.showModal === true && o.animate === true ) { self.screen.fadeIn('slow'); }
else { self.screen.removeClass('ui-simpledialog-hidden'); }
}
self.sdIntContent.addClass('ui-overlay-shadow in').css('zIndex', o.zindex).trigger('create');
if ( o.fullScreen === true && ( coords.width < 400 || o.fullScreenForce === true ) ) {
self.sdIntContent.removeClass('ui-simpledialog-container').css({'border': 'none', 'position': 'absolute', 'top': coords.fullTop, 'left': coords.fullLeft, 'height': coords.high, 'width': coords.width, 'maxWidth': coords.width }).removeClass('ui-simpledialog-hidden');
} else {
self.sdIntContent.css({'position': 'absolute', 'top': coords.winTop, 'left': coords.winLeft}).removeClass('ui-simpledialog-hidden');
}
$(document).bind('orientationchange.simpledialog', {widget:self}, function(e) { self._orientChange(e); });
if ( o.resizeListener === true ) {
$(window).bind('resize.simpledialog', {widget:self}, function (e) { self._orientChange(e); });
}
}
if ( $.isFunction(o.callbackOpen) ) {
o.callbackOpen.apply(self, o.callbackOpenArgs);
}
},
close: function() {
var self = this, o = this.options, retty;
if ( $.isFunction(self.options.callbackClose) ) {
retty = self.options.callbackClose.apply(self, self.options.callbackCloseArgs);
if ( retty === false ) { return false; }
}
if ( self.isDialog ) {
$(self.dialogPage).dialog('close');
self.sdIntContent.addClass('ui-simpledialog-hidden');
self.sdIntContent.appendTo(self.displayAnchor.parent());
if ( $.mobile.activePage.jqmData("page").options.domCache != true && $.mobile.activePage.is(":jqmData(external-page='true')") ) {
$.mobile.activePage.bind("pagehide.remove", function () {
$(this).remove();
});
}
} else {
if ( self.options.showModal === true && self.options.animate === true ) {
self.screen.fadeOut('slow');
} else {
self.screen.addClass('ui-simpledialog-hidden');
}
self.sdIntContent.addClass('ui-simpledialog-hidden').removeClass('in');
$(document).unbind('orientationchange.simpledialog');
if ( self.options.resizeListener === true ) { $(window).unbind('resize.simpledialog'); }
}
if ( o.mode === 'blank' && o.blankContent !== false && o.blankContentAdopt === true ) {
self.element.append(o.blankContent);
o.blankContent = true;
}
if ( self.isDialog === true || self.options.animate === true ) {
setTimeout(function(that) { return function () { that.destroy(); };}(self), 1000);
} else {
self.destroy();
}
},
destroy: function() {
var self = this,
ele = self.element;
if ( self.options.mode === 'blank' ) {
$.mobile.sdCurrentDialog.sdIntContent.find('select').each(function() {
if ( $(this).data('nativeMenu') == false ) {
$(this).data('selectmenu').menuPage.remove();
$(this).data('selectmenu').screen.remove();
$(this).data('selectmenu').listbox.remove();
}
});
}
$(self.sdIntContent).remove();
$(self.dialogPage).remove();
$(self.screen).remove();
$(document).unbind('simpledialog.'+self.internalID);
delete $.mobile.sdCurrentDialog;
$.Widget.prototype.destroy.call(self);
if ( self.options.safeNuke === true && $(ele).parents().length === 0 && $(ele).contents().length === 0 ) {
ele.remove();
}
},
updateBlank: function (newHTML) {
var self = this,
o = this.options;
self.sdIntContent.empty();
if ( o.headerText !== false || o.headerClose !== false ) {
self.sdHeader = $('<div class="ui-header ui-bar-'+o.themeHeader+'"></div>');
if ( o.headerClose === true ) {
$("<a class='ui-btn-left' rel='close' href='#'>Close</a>").appendTo(self.sdHeader).buttonMarkup({ theme : o.themeHeader, icon : 'delete', iconpos: 'notext', corners: true, shadow : true });
}
$('<h1 class="ui-title">'+((o.headerText !== false)?o.headerText:'')+'</h1>').appendTo(self.sdHeader);
self.sdHeader.appendTo(self.sdIntContent);
}
$(newHTML).appendTo(self.sdIntContent);
self.sdIntContent.trigger('create');
$(document).trigger('orientationchange.simpledialog');
},
_init: function() {
this.open();
}
});
})( jQuery );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content" data-role="popup">
<a href="#" data-role="button" id="test-button">Test popup</a>
<div data-role="popup" id="confirmDialog" style="max-width:400px;" class="ui-corner-all" data-theme="a">
<div data-role="header" class="ui-corner-top">
<h1>Delete Page?</h1>
</div>
<div data-role="content" class="ui-corner-bottom ui-content">
<form >
<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
<h3 class="ui-title">Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.</p>
<a href="#" data-role="button" data-inline="true" data-rel="back" >Cancel</a>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" >Delete</a>
</div>
</form>
</div>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>