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

Posted 2023-05-09

【中文标题】首次打开时，Jquery Mobile AJAX 弹出窗口出现在页面底部

【英文标题】：Jquery Mobile AJAX Popup appears at bottom of page on first open

【发布时间】：2014-07-04 04:03:36

【问题描述】：

我正在使用 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> 

谢谢

【参考方案1】：

弹出窗口在加载内容之前打开，因此打开时它的大小不正确。在 post success 函数中加载数据后是否可以调用弹出窗口：

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

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