Does nothing when trying to open popup

Question

In HTML

I have this footer :

<div data-role="footer" data-position="fixed" data-theme="c" data-tap-toogle="false">
            <div data-role="navbar" data-grid="c">
                    <ul>
                       <li><a class = "nav" href="#" id="btnCl">1</a></li>
                       <li><a class = "ui-btn-active  nav" href="#">2</a></li>
                       <li><a class = "nav" href="#" >3</a></li>
                       <li><a class = "nav" href="#" id="btnDef">4</a></li>
                    </ul>
            </div>
</div>

And I created this popup :

<div data-role="popup" id="popupMenu" data-theme="b">
        <ul data-role="listview" data-inset="true" style="min-width:210px;">
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">D</a></li>
        </ul>
    </div>

And created on the page Javascript this function which should, when clicking on the tab 1 of footer open the popup:

$('#btnCl').click(function () {
        $("#popupMenu").popup("open");
    });

Problem:

When you press the tab 1 of footer nothing happens...

Answer 1

Popups jQuery Mobile

<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/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="pop">Basic Popup</a>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.</p>
</div>

Project website: http://demos.jquerymobile.com/1.4.5/popup/

Don’t forget to always link jQuery Mobile addresses. Just choose your template and adapt the html tags, click on View Source

---

Popup

Use this javascript function

<script type="text/javascript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
</script>

On the link a hrefuse the onClick="MM_openBrWindow('http://google.com','popup1','scrollbars=yes,resizable=yes,width=500,height=500')"

Upshot

In this example the popup opens by clicking on the link 1
https://jsfiddle.net/tiagoboeing/nhmwfdpm/

Possible attributes

*In this example is as google with. to display
Popup 1: name of your window, called javascript
Scrollbars: shows scrollbar if necessary (yes, no)
Resizable: lets resize the window (yes, no)
Width: window width (in pixels)
Height: window height (in pixels)
menubar: show menu bar (yes, no)
Toolbar: toolbar (yes, no)
status: status bar (yes, no)