Home/ Questions/Q 6946111
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T13:31:22+00:00

I need to open a popup window to a custom size. Using suggestions from

  • 0

I need to open a popup window to a custom size. Using suggestions from jQuery mobile docs I can get the custom size to work when I load the page with ajax (in the same .html document). When I have a separate .html document, it doesn’t load the custom width I specify.

<!DOCTYPE html> 
<html> 
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" > 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
    <style>
        .ui-dialog .ui-header, 
        .ui-dialog .ui-content, 
        .ui-dialog .ui-footer { 
            max-width: 800px; 
            margin: 10% auto 15px auto; 
        }
    </style>
</head>
<body>
<div data-role="page" id="popup">
<div data-role="content">
    <a data-role="button" href="#" data-rel="back">back</a>
</div>
</div>
</body>
</html>

This is the code. If I link to it within the same file, and just use 

<a href="#popup" data-rel="dialog">popup</a>

It works fine. You can see the css rules that jQuery Mobile says to add if you want to change the width (jQuery Mobile Dialog docs).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I answered my own question. I found that with the ajax loading, when the page is fetched it only gets the content from the target page. If I want to provide some custom CSS to be applied to the target page, I need to have it on the parent page (or the page that is calling the popup).

    • 0