JSFiddle - React, Tailwind, and code Playground

by Dragan Gaić

HTML

<!DOCTYPE html> 
<html>
    
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/> 
        <title>Single page template</title> 
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css"/>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    </head> 
    
    <body> 
        
        <div data-role="page" id="index">
            
            <div data-role="header">
                <h1>Single page</h1>
                
            </div><!-- /header -->
            
            <div data-role="content">
                <a href="#toc" data-rel="popup" data-role="button" data-position-to="#headerH1">Show Popup</a>
                <ul data-role="listview">
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>                    
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                   ...

CSS

body {
    /*overflow: hidden;*/
}

JavaScript

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('popupafteropen', '[data-role="popup"]' ,function( event, ui ) {
        $('body').css('overflow','hidden');
    }).on('popupafterclose', '[data-role="popup"]' ,function( event, ui ) {
        $('body').css('overflow','auto');
    });

    // dissregard this part of code, it is here just to close popup
    $(document).on('click', '#custom-listview li' ,function( event, ui ) {
        $('[data-role="popup"]').popup( "close" );
    })    
});