Question

我有一个对话框，它是一个弹出窗口，但每当我使用Chrome浏览器在Android设备上滚动时，它只会重新出现几秒钟。

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

我已经浏览了JqueryMobiles论坛，他们之所以说是因为调整大小事件，但我无法找到解决方法。

任何人都可以帮忙吗？

CSS代码：

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

HTML code：

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

Answer 1

我在这里发现了https://github.com/kakul/jquery-mobile/commit/820aa81b1eb0bb546d40571541cf4a084f6409e5

您只需要插入缺少的代码位，它应该可以正常工作

滚动时，弹出窗口在Android Chrome浏览器中消失了几秒钟

1 个答案: