首次打开时，Jquery Mobile AJAX弹出窗口显示在页面底部

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");
    });            
};

这样，弹出窗口在显示时将已经被填充。