Question

我正在使用jqm 1.4.2并且在我的应用程序中有许多弹出窗口，我通过ajax调用加载。我有一个问题，第一次点击弹出窗口时，它出现在屏幕的底部 - 但仅限于通过ajax打开弹出窗口时。如果我将其关闭并重新打开，它会按预期显示在屏幕中间。有什么想法会发生这种情况吗？示例代码如下：

          <!--POPUP IN THE PAGE--> 
            <div data-role='popup' id='popupVisualUnit' data-theme='a' data-overlay-theme='a' data-dismissible='false'  style='min-width: 300px;'>
                <div data-role='header' data-theme='a'>
                    <h1>Visual Check</h1>
                </div>
                <div data-role='main' class='ui-content'>
                    <form id='frmVisualUnit'>
                        <!--using ajax to create the form  visualCheck.php -->

                    </form>
                </div>
            </div>

            //JQUERY FUNCTION TO DISPLAY POPUP
                function DisplayVisualCheckPopUP(unitid) 
                {            
                    $.post("visualCheck.php", "unitid="+unitid, function(data){
                        $("#frmVisualUnit").html(data);
                        $("#frmVisualUnit").trigger('create');
                        });
                    $("#popupVisualUnit").popup("open");
                };

  //THE ACTUAL POPUP CODE
    <div class='ui-field-contain'>
        <label for='selectLockUnit'>Lock/Unlock Unit</label>
            <select name='selectLockUnit' id='selectLockUnit'>
                 $LockInnerOptions                  
            </select>
    </div>
    <div class='ui-field-contain'>
        <label for='selectUnitStatus'>Unit Status</label>
            <select name='selectUnitStatus' id='selectUnitStatus'>
                 $statInnerOptions
            </select>
    </div>
    <div class='ui-field-contain'>
        <label for='selectAccessStatus'>Access Status</label>
            <select name='selectAccessStatus' id='selectAccessStatus'>
                $AccessInnerOptions
            </select>
    </div>
    <div class='ui-field-contain'>
        <label for='selectVisualCheck'>Visual Check</label>
            <select name='selectVisualCheck' id='selectVisualCheck'>
                 $visInnerOptions 
            </select>
    </div>

    <div class='ui-grid-a'>
        <div class='ui-block-a'><input type='submit' data-theme='c' onclick='UpdateVisualCheck()' value='Save' class='ui-btn ui-btn-c ui-btn-inline' data-transition='pop' onsubmit='this.submit(); this.reset(); return false'/></div>
        <div class='ui-block-b'><a href='#' class='ui-btn ui-btn-c' data-rel='back' data-transition='pop'>Cancel</a></div>
        <div id='success' style='color: black;'></div>
    </div>

由于

Answer 1

弹出窗口在内容加载之前打开，因此打开时弹出的大小不正确。在后成功函数中加载数据后，您可以打开弹出窗口：

function DisplayVisualCheckPopUP(unitid) {            
    $.post("visualCheck.php", "unitid="+unitid, function(data){
        $("#frmVisualUnit").html(data);
        $("#frmVisualUnit").trigger('create');
        $("#popupVisualUnit").popup("open");
    });            
};

这样弹出窗口就会在显示时填充。

首次打开时，Jquery Mobile AJAX Popup出现在页面底部

1 个答案: