标签: jquery-mobile-popup

我有以下代码使用jQuery mobile创建弹出窗口.创建弹出窗口并创建表单并将其附加到弹出窗口以及两个按钮.这段代码确实有效,但我想知道是否有更好的方法来实现我的预期目标.

    //create a div for the popup
    var $popUp = $("<div/>").popup({
        dismissible : false,
        theme : "a",
        overlyaTheme : "a",
        transition : "pop"
    }).bind("popupafterclose", function() {
                    //remove the popup when closing
        $(this).remove();
    });
    //create a title for the popup
    $("<h2/>", {
        text : PURCHASE_TITLE
    }).appendTo($popUp);

            //create a message for the popup
    $("<p/>", {
        text : PURCHASE_TEXT
    }).appendTo($popUp);

    //create a form for the pop up
    $("<form>").append($("<input/>", {
        type : "password",
        name : "password",
        placeholder : PASSWORD_INPUT_PLACEHOLDER
    })).appendTo($popUp);

   //Create a submit …

我正在尝试为我的jQuery移动应用程序添加"更改日志".如果出现错误,用户应该具备查看错误的能力.因此我实现了一个带有textarea的弹出窗口(见下面的代码)

        <!-- DIALOG Start-->
        <div data-role="popup" id="popupLog" data-overlay-theme="a" data-theme="b" style="max-width:400px;" class="ui-corner-all">
        <div data-role="header" data-theme="b" class="ui-corner-top">
        <h1>Logg-Einträge:</h1>
        </div>
        <div data-role="none" data-theme="b" class="ui-corner-bottom ui-content">
        <textarea style="height: 120px; max-height: 120px" readonly="readonly" data-mini="true" cols="40" rows="8" id="popupTextArea"></textarea>
        <a href="#" data-role="button" data-inline="true" id="btn_textArea" data-rel="back" data-theme="c">OK</a>    
        </div>
        </div>
        <!-- DIALOG End-->

此popUp充满了数据,并在单击特定按钮时打开:

$('#showLog').click(function() {
    $("#popupDialog").popup("close");
    // populate the textArea with the text
    $("#popupTextArea").text(sessionStorage.getItem("logStack"));
    // open popUp after a specific time
     setTimeout( function(){$('#popupLog').popup('open'); 
         }, 1000 );
});

到目前为止,所有功能都正常运行.问题是:当用户在textarea中向下滚动时,关闭popUp并重新打开它,滚动条的位置仍然相同 - 例如用户向下滚动到底部,关闭popUp并重新打开它 - popUp将位于textarea agein的底部.但是当我再次打开popUp时,我想总是把它放在textarea的顶端.为了实现这一点,我在这个popUp中实现了一个"Ok"-Button,如下所示,它关闭popUp并将scrollingTop设置为0:

$('#btn_textArea').click(function() {
// Setting position …

最新的chrome版本"43.0.2357.65 m"是否会破坏JQueryMobile 1.3.2？当我点击弹出窗口时,它会转到页面顶部,滚动条消失.在以前的版本中它很好.

问题影响了我的应用程序,但可以在JQueryMobile演示页面上重现:

1. 使用Chrome 43.0.2357.65 m访问http://demos.jquerymobile.com/1.3.2/
2. 点击弹出窗口
3. 在弹出页面上,单击页面中间的"登录"按钮.
4. 它将转到页面顶部,滚动条将消失.

请注意,每次都不会发生这种情况 - 如果再次尝试它可能会起作用,但如果从新选项卡开始执行步骤,它确实会一直发生.

我提出了Chrome的一个问题,但只是想知道是否有人知道发生了什么,如果有一个解决方法我可以实现.

谢谢!

请找到以下小提琴http://jsfiddle.net/yesvin/Xj8p8/

<ul data-role="listview">
        <li data-role="fieldcontain">
            <label for="basic">Text Input:</label>
            <input type="text" name="name" id="basic" value=""  />
         </li>
     <li data-role="fieldcontain">
            <label for="basic">Text Input:</label>
            <input type="text" name="name" id="basic" value=""  />
         </li>
     <li data-role="fieldcontain">
            <label for="pageselect">page select</label>
            <select name="pageselect" id="pageselect" data-native-menu="false">                
                <option value="">Choose One</option>
                <option value="">pageselect opt 1</option>
                <option value="">pageselect opt 2</option>
                <option value="">pageselect opt 3</option>
            </select>
         </li>
     <li data-role="fieldcontain">
            <label for="basic">Text Input:</label>
            <input type="text" name="name" id="basic" value=""  />
         </li>
</ul>   

<a href="#pop" data-rel="popup" data-position-to="window" data-role="button" id="farmer_family_member">Add Popup</a>


<div data-role="popup" id="pop">
    <ul data-role="listview">
        <li …

我正在创建一个应用程序,其中我想要一个弹出对话框,其中包含一些文本字段,因此我从jquery移动站点中获取了一个示例, 并插入了4个输入文本以插入带有国家和地区代码的固定电话号码.当我在模拟器上运行它时会打开弹出对话框,但是当用户尝试在文本框中插入某些内容时,它会向上滚动,所以我在脚本中使用此代码来禁用页面滚动,如下所示,此问题是用户能够仅在2个文本框中插入数据,因为文本框的其余部分隐藏在键盘旁边.我想要的是当用户键盘打开时页面不应该自己滚动,用户应该能够滚动弹出对话框来插入数据.这是我返回的代码:

删除页面...

<div 
    data-role="popup" 
    id="popupDialog" 
    data-overlay-theme="a" 
    data-theme="c" 
    data-dismissible="false" 
    style="max-width:400px;"
    class="ui-corner-all"
>  
    <div data-role="header" data-theme="a" class="ui-corner-top">
        <h1>Delete Page?</h1>
    </div>
    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
        <h3 class="ui-title">Are you sure you want to delete this page?</h3>
        <p>This action cannot be undone.</p>
        <input type='number' id='area code' placeholder='Area code'>
        <input type='number' id='country code' placeholder='Country code'>
        <input type='number' id='numder' placeholder='Number'>
        <input type='button' id='open' data-rel='back' value='OK'>
    </div>
</div>

这是禁用页面滚动的JavaScript:

$(document)
  .on('popupafteropen', '[data-role="popup"]', function (event, ui) {
    $('body').css('overflow', 'hidden');
  })
  .on('popupafterclose', '[data-role="popup"]', function (event, ui) …

我有一个令人困惑的问题,以jQuery Mobile弹出窗口为中心.当我第一次点击它时它不居中并出现在我页面的一角.关闭它并再次打开它后突然居中.

这是我的代码:

$(document).on("pageshow",function(){
  $('.image_link').on('click', function(event){
    var id = $(this).children('img').attr("id");
    $("#show_image_img").attr("src",sPath + "/view/images/" + id);
    $("#show_image").popup('open');
    $("#show_image" ).popup({ positionTo: "window" });
  });
});

这是我的HTML代码

<div data-role="popup" id="show_image" data-theme="c" class="ui-corner-all">
  <div style="padding:20px 30px;">
    <img id="show_image_img" src="" />
  </div>
</div>

有人知道如何解决这个问题吗？我已经尝试过各种各样的事情,例如将pageshow事件更改为pagebeforeshow等等.

我试图显示弹出,但弹出自动消失,而历史=假弹出保持可见,但在随后关闭弹出窗口浏览器的后退动作被触发

<div data-role="page" id="indexpage">
    <div data-role="popup" data-history="false" id="appPopup">test popup</div>
    <script>
    $("#indexpage").on("pageshow", function () {
        $("#appPopup").popup("open");
    });
    </script>
</div>

检查这里发生了什么:http: //jsfiddle.net/francisdb/ThtfZ/

有关如何解决此问题的任何想法？

在我的jquery移动应用程序中,我想在打开弹出窗口后自动将焦点设置在输入字段上.输入字段位于弹出窗口中,如下所示.焦点在开始时正确设置,但在弹出窗口完全降低后丢失.

    <!-- Link--><a onclick="$('#popup_input').focus()" href="#popup" data-iconpos="top" data-rel="popup" data-position-to="window" data-role="button" data-inline="false" data-transition="pop" data-icon="plus" data-theme="b">open</a>
<div data-role="popup" id="popup" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
            <div data-role="header" data-theme="a" class="ui-corner-top">
                 <h1>Popup</h1>

            </div>
            <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
                 <h3 class="ui-title">Focused Field</h3>

                <p>
                    <input type="text" id="popup_input" />
                </p> <a href="#" data-role="button"data-rel="back">Close</a>

            </div>
        </div> 

http://jsfiddle.net/kx7Gz/

谢谢你的帮助

亲切的想法

我怎样才能使用jQuery + jQuery Mobile.一段时间后弹出一个对话框消失.这是我在某种程度上写的作品.它会在一段时间后消失.但是,当我单击按钮再次激活它时它不起作用,除非我再次刷新页面.

JavaScript的

<script type="text/javascript">
     $(document).on('pageinit', function(e) {
        $('#postnote').click(function() {
            $('#dialog').popup('open', {history: false}).delay(500).fadeOut('slow').hide();
        });
    });
</script>

这页纸

<div data-role="page" id="addnote">
    <div id="dialog" data-role="popup" data-transition="fade">
        <div data-role="header"><h1>Note posted</h1></div>
    </div>
    <div data-role="header" data-theme="a">
        <h1>Add Note</h1>
    </div>
    <div data-role="content" data-theme="b">
        <textarea id="note" rows="40" name="note"></textarea>
        <a href="#" id="postnote" data-role="button" data-transition="fade" data-theme="b">Post</a>
        <a href="#" data-rel="back" data-role="button" data-transition="slidefade" data-theme="a" data-direction="reverse">Back</a>
    </div><!-- /content -->
</div><!-- /page -->