Home/ Questions/Q 9134179
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T08:36:53+00:00

I’m trying to display a Popup using jQuery Mobile, but I have a problem

  • 0

I’m trying to display a Popup using jQuery Mobile, but I have a problem with the styling of the popup.
The HTML markup looks like this:

<div data-role="popup" id="confirmDialog" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">
        <div data-role="header" data-theme="a" class="ui-corner-top">
            <h1>Delete Page?</h1>
        </div>
        <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
            <h3 class="ui-title">Are you sure you want to delete this page?</h3>
            <p>This action cannot be undone.</p>
            <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>    
            <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Delete</a>  
        </div>
    </div>

(BTW, this code is copied from the jQuery Mobile site).

When I open the popup using the .popup(‘open’) method, the header (Delete Page?) and the buttons are not styled. The header appears as regular text, and the buttons appear as regular links.

What can cause this behavior?

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are probably having an error in your HTML.

    Here’s a working example from your code: http://jsfiddle.net/Gajotres/EtDZc/

    <!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
  <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <a href="#" data-role="button" id="test-button">Test popup</a>
            <div data-role="popup" id="confirmDialog" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">
                <div data-role="header" data-theme="a" class="ui-corner-top">
                  <h1>Delete Page?</h1>
                </div>
                <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
                  <h3 class="ui-title">Are you sure you want to delete this page?</h3>
                  <p>This action cannot be undone.</p>
                  <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>    
                  <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Delete</a>  
                </div>
            </div>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>   
</body>
</html>

    and this one:

    $('#index').live('pagebeforeshow',function(e,data){    
    $('#test-button').live('click', function(e) {
        $('#confirmDialog').popup('open');
    });    
});

    when working with jQuery 1.9 or higher you must use function on, live is deprecated and no longer exist.

    $(document).on('pagebeforeshow','#index',function(e,data){    
    $(document).on('click', '#test-button',function(e) {
        $('#confirmDialog').popup('open');
    });    
});

    You were also probably using document ready for event binding. It should not be used with jQuery Mobile, instead use page events.

    • 0