Question

I am trying to use jquery mobile popup for my website. When i include mobile js files, the whole entire page is messed up. I assume that the styles are applied to my document. Actually i don’t want to have mobile styles applied to my page. I want only to use the popup functionality for certain parts and ignore the rest.

Is it possible to have and how?

Thanks in advance.

Answer 1

Yes and you can find more about this in my other article: https://stackoverflow.com/a/14550417/1848600, search for: Methods of markup enhancement prevention.

To make it short:

It can do it by adding this attribute:

data-enhance="false"

to the header, content, footer container.

This also needs to be turned in the app loading phase:

$(document).one("mobileinit", function () {
    $.mobile.ignoreContentEnabled=true;
});

Initialize it before jquery-mobile.js is initialized (look at the example below).

More about this can be found here:

http://jquerymobile.com/test/docs/pages/page-scripting.html

You also need to use data-role=”none” on a content because if you use data-enhance=”false” popup will lose its styling.

Word of advice, find another implementation of popup. Basically you are using a nucler weapon to kill a single fly.

Example: http://jsfiddle.net/Gajotres/PGL5t/