jQuery Mobile

by Marko Keuschnig

HTML

<!--<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
--> 
<script src="https://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link href="https://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet">


<h1>Accordion with Popup and two buttons</h1>

<div data-role="collapsible" data-collapsed="false" style="position: relative">
     <h4>
        Heading

    </h4>
    <a id="fetch-data" data-role="button" data-icon="check" data-iconpos="notext" data-theme="c" data-inline="true">Check</a>
    <ul data-role="listview">
        <li><a href="#">List item 1</a></li>
        <li><a href="#">List item 2</a></li>
        <li><a href="#">List item 3</a></li>
    </ul>
</div>

<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;" class="ui-popup ui-body-b ui-overlay-shadow ui-corner-all">
    <div data-role="header" data-theme="a" role="banner" class="ui-header ui-bar-a">
        <h1 class="ui-title" role="heading" aria-level="1">Take over</h1>
    </div>
    <div role="main" class="ui-content">
        <h3 class="ui-title">Are you sure you want to take over this item?</h3>
        <p>This action cannot be undone.</p>
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">take over</a>
    </div>
</div>

CSS

#fetch-data {
    top: 0px !important;
    right: 6px;
    position: absolute;
}

JavaScript

$(document).ready(function () {
    $('#fetch-data').on('click', function (e) {
        $("#popupDialog").popup("open");
        return false;
        //e.stopPropagation();
        //e.stopImmediatePropagation();
    });
});