javascript - 滚动时，弹出窗口在android chrome浏览器中消失几秒钟

我有一个对话框，它是一个弹出窗口，但是每当我在带有Chrome浏览器的android设备上滚动时，它就会消失几秒钟，然后重新出现。

该对话框包含用户需要填写的HTML表单，但是数据确实保留在表单中。

我在JqueryMobiles论坛上四处查看，他们说这是因为发生了调整大小事件，但是我找不到解决方法。

有人可以帮忙吗？

CSS代码：

div.standarddialog {
max-width:400px;
position:relative !important;
}

HTML代码：

div data-role="popup" id="receiptUploadFileDialog" data-overlay-theme="b"
 data-theme="a" class="standarddialog" data-history="false">
<div data-role="header" class="ui-corner-top">
    <h1>Import</h1>
</div>
@* The main part of the dialog box *@
<div data-role="content" class="ui-corner-bottom ui-content">
    <p>Import file</p>
    @* The form where the user can define the variables *@
    <form method="post" enctype="multipart/form-data"
          data-ajax="false" target="receiptTargetUploadFile" id="receiptUploadFileForm" data-bind="attr: { action: model.uploadUrl }">
        <input type="file" name="imgFile" accept="image/*" id="receiptUploadFileInput">   @* The image file input *@
        Description <input type="text" name ="Description" id="desc"/>                  @* Description input *@
        Exspense type: <select name="expType" id="expType">                             @* Expense Type as a dropdown menu, values taken from T03 *@
                </select>
        Total: <input type="number" name="amount" id="amount" required><br>             @* The amount as input *@
        Currency: <select name="currency" id="currency">                                @* The currency of the amount as a dropdown menu, values taken from A13 *@
                </select>
        Private expenses: <input type="checkbox" name="priExp" id="priExp"><br>         @* Private expense if the user paid with own money or company money *@
        Comment: <input type="text" name="comment" id="comment"><br>                    @* Comment the user can define *@
    </form>
    <p data-bind="text: model.validationText" class="validationError"></p>

    <a href="#" data-icon="arrow-u" data-role="button" data-iconpos="right" data-bind="click: $root.receiptSubmitUploadFileForm.bind($root)">Upload</a> @* Submit button when the user is done, filling in the inputs *@
</div>

<iframe id="receiptTargetUploadFile" name="receiptTargetUploadFile" style="position:absolute; left:-999em; top:-999em;"></iframe>
<a href="#receiptUploadFileDialog" data-position-to="window" data-transition="pop"
   id="receiptInvisibleFileDialogOpener" data-role="button" data-rel="popup" style="visibility: hidden"></a>

Javascript：

 public receiptShowUploadFileForm(settings: FileUploadSettings): void {
    if (this.runSetup) {
        this.setupCurrency();
        this.setupExpType();
    }
    this.model.uploadUrl(settings.uploadUrl);
    this.model.validatePath = settings.validatePath;
    this.model.afterUpload = settings.afterUpload;
    this.model.validationText("");
    this.jqMap.btnInvisibleFileOpener.click();

    $("#receiptTargetUploadFile")[0].onload = () => {
        this.jqMap.fileImportDialog.popup().popup("close");

        if (this.model.afterUpload) {
            this.model.afterUpload();
        }

        $("#receiptTargetUploadFile").remove();
        $('<iframe id="receiptTargetUploadFile" name="receiptTargetUploadFile" style="position:absolute; left: -999em; top: -999em;"></iframe>').appendTo('body');
    };
        this.runSetup = false;
}

最佳答案

我在这里找到了答案https://github.com/kakul/jquery-mobile/commit/820aa81b1eb0bb546d40571541cf4a084f6409e5
您只需要插入缺少的代码位，它就可以工作