<div>
<div class="content wysiwyg-content">
I can create a basic HTML page using the example <a href="http://jquerymobile.com/test/docs/pages/popup/popup-panels.html" rel="ugc">http://jquerymobile.com/test/docs/pages/popup/popup-panels.html</a>&nbsp;and it works as designed. &nbsp;I'm attempting to produce the same popup functionality with this code in a Wordpress homepage with zero luck. &nbsp;The Open Panel button is at the top right of <a href="http://test2.dfigdesign.com" rel="ugc">http://test2.dfigdesign.com</a>&nbsp;and my panel should appear after the &lt;div id=&quot;main&quot; data-role=&quot;content&quot;&gt;. &nbsp;I have the the CSS and scripting included in the page.<br />
<br />
How should this be handled differently to have the page return a panel, please?<br />
<br />
<br />
&lt;div data-role=&quot;popup&quot; id=&quot;popupPanel-popup&quot; data-corners=&quot;false&quot; data-theme=&quot;none&quot; data-shadow=&quot;false&quot; data-tolerance=&quot;0,0&quot;&gt;<br />
<br />
&nbsp; &nbsp; &lt;button data-theme=&quot;a&quot; data-icon=&quot;back&quot; data-mini=&quot;true&quot;&gt;Back&lt;/but<wbr />ton&gt;<br />
&nbsp; &nbsp; &lt;button data-theme=&quot;a&quot; data-icon=&quot;grid&quot; data-mini=&quot;true&quot;&gt;Menu&lt;/but<wbr />ton&gt;<br />
&nbsp; &nbsp; &lt;button data-theme=&quot;a&quot; data-icon=&quot;search&quot; data-mini=&quot;true&quot;&gt;Search&lt;/b<wbr />utton&gt;<br />
&nbsp; &nbsp; &nbsp;<br />
&lt;/div&gt;
</div>
</div>


I can create a basic HTML page using the example http://jquerymobile.com/test/docs/pages/popup/popup-panels.html and it works as designed.  I'm attempting to produce the same popup functionality with this code in a Wordpress homepage with zero luck.  The Open Panel button is at the top right of http://test2.dfigdesign.com and my panel should appear after the <div id="main" data-role="content">.  I have the the CSS and scripting included in the page.

How should this be handled differently to have the page return a panel, please?


<div data-role="popup" id="popupPanel-popup" data-corners="false" data-theme="none" data-shadow="false" data-tolerance="0,0">

    <button data-theme="a" data-icon="back" data-mini="true">Back</button>
    <button data-theme="a" data-icon="grid" data-mini="true">Menu</button>
    <button data-theme="a" data-icon="search" data-mini="true">Search</button>
     
</div>

Jquery Mobile popupPanel in a Wordpress PHP Page

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

jQuery

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

PHP is a widely-used server-side scripting language especially suited for web development, powering tens of millions of sites from Facebook to personal WordPress blogs. PHP is often paired with the MySQL relational database, but includes support for most other mainstream databases. By utilizing different Server APIs, PHP can work on many different web servers as a server-side scripting language.