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.
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/
