Magento jQuery Mobile Popup with full size in percent %

When develop a magento mobile theme with jQuery Mobile, I meet a problem what I think it ‘s good to share here. That ‘s the full width base on percent of popup. Let ‘s get an example I have a popup html like this.

<!-- login form html -->
<div data-dismissible='false' data-role="popup" id="login_window" class="ui-content" data-overlay-theme="b" data-theme="none" data-corners="false" data-shadow="false">
    <form>
        <div class="mb-popup-form">
            <label for="email" class="ui-hidden-accessible">Email:</label>
            <input class="input_text" type="text" name="email" value="" placeholder="Email" data-theme="a">
            <label for="pw" class="ui-hidden-accessible">Password:</label>
            <input class="input_text" type="password" name="pass" id="pw" value="" placeholder="Password" data-theme="a">
            <button type="submit" class="ui-btn ui-corner-all ui-shadow">Login</button>
            <button type="button" class="ui-btn ui-corner-all ui-shadow" onclick="$( '#login_window' ).popup( 'close' );">Cancel</button>
        </div>
    </form>
</div>

This code of javascript can show the popup

$("#login_window").popup();
            $("#login_window").popup("open", {transition: 'slidedown'});

And what is the problem? The problem is the width of text box is too small, I want it should be 90% or something like that. In this case, we just need to style for id “login_window” like this:

#login_window-popup{
    width: 100%;
}

It will solve your problem. Now try and see the magic.