Create Dynamic Pop Up with jQuery Mobile

Hello Everyone,

In jquery mobile project, I want to customize normal javascript alert message. So I plan to create runtime jquery mobile popup.

function runtimePopup having below arguments:
message: string value of the alert message
header: string value for popup header
fun_ok: a function for ‘OK’ button of popup message
showcancel: true/false flag, if it is true then cancel button will appears.
css: Custom css e.g. {“background-color”:”#000″}

Please find below function to create runtime jquery mobile popup.
View Demo

function runtimePopup(message,header, fun_ok,showcancel,css) {
	//create a div for the popup
	var odiv = ($('#mydivpopup').length) ? $('#mydivpopup') : $("<div id='mydivpopup' data-role='popup'></div>");
	var $popUp = odiv.popup({
        dismissible : false,
        transition : "pop",
        overlyaTheme : "a",
    }).on("popupafterclose", function() {
    	//remove the popup when closing


	//create a title for the popup
    var $divHeder = $("<div/>", {"class":"ui-header ui-bar-b"});
    $("<p class='popupHeader'>" + header + "</p>").appendTo($divHeder);

    //create content
    var $divContent = $("<div class='ui-content'>" + message + "</div>");

	//create a back button
    $("<a>", {
    	id: "mydivpopup-close",
        text : "Cancel",
        "data-jqm-rel" : "back"
        inline : true
    }).on("click", function() {

    if(!showcancel) {

    fun_ok = (fun_ok) ? fun_ok : function(){}; 

    //Create a submit button
    $("<a>", {
        text : "OK",
        "data-jqm-rel" : "back"
        inline : true
    }).on("click", function() {


    //Set PopUp to window center
    if($('#mydivpopup-popup').is('.ui-popup-hidden')) {
    if($('#mydivpopup-screen').is('.ui-screen-hidden')) {

    var popHeight = $('#mydivpopup').height();
    var popWidth = $('#mydivpopup').width();
	var viewportHeight = jQuery(window).height();
	var viewportWidth = jQuery(window).width();
	var top  = (viewportHeight/2) - (popHeight/2);
	var left = (viewportWidth/2) - (popWidth/2);
	if(top > 0) {
	if(left > 0) {

3 thoughts on “Create Dynamic Pop Up with jQuery Mobile

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s