Question

我有以下代码使用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 button(fake)
    $("<a>", {
        text : SUBMIT_BTN_TXT
    }).buttonMarkup({
        inline : true,
        icon : "check"
    }).bind("click", function() {
        $popUp.popup("close");
        that.subscribeToAsset(callback);
    }).appendTo($popUp);

    //create a back button
    $("<a>", {
        text : BACK_BTN_TXT,
        "data-jqm-rel" : "back"
    }).buttonMarkup({
        inline : true,
        icon : "back"
    }).appendTo($popUp);

    $popUp.popup("open").trigger("create");

Answer 1

您的示例很棒，这是应该如何创建动态jQuery / jQuery Mobile内容的海报示例。

只改变三件事：

最后，您应该将弹出窗口附加到所需的jQuery Mobile页面，因为它不能在data-role =“page”div之外工作。
将功能绑定更改为上的功能。 On是更快的事件绑定方法。它就是替换bind和delegate。

检查您的代码是否适用于Chrome等网络工具包浏览器。 Chrome有一个令人讨厌的错误，它阻止在除 pageshow 之外的每个页面事件中打开程序化弹出窗口。有关此问题的详细信息：https://stackoverflow.com/a/15830353/1848600

Answer 2

首先使用您的内容进行Popup潜水

 <div  id="popupPhotoLandscape" class="photopopup" data-role="popup" data-theme="none" data-     shadow="false" data-overlay-theme="a">
            <a href="#home"  data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>

 //Content
        </div>

用于打开弹出窗口的按钮

   <a  data-role="button" data-theme="c" data-inline="true" data-mini="true" id="snap_view_btn" style="float:left;margin-top: 4px;" >Snap View</a>

点击按钮

$('#snap_view_btn').click(function() {

   $('#popupPhotoLandscape').popup();
   $('#popupPhotoLandscape').popup("open");
});

Page Init

$( document ).on( "pageinit", function() {

   $( ".photopopup" ).on({
    popupbeforeposition: function() {
        var maxHeight = $( window ).height() - 60 + "px";
        $( ".photopopup" ).css( "height", '800px' );
        $( ".photopopup" ).css( "width", '600px' );
    }

 });

 });

Answer 3

https://github.com/serbanghita/jQM-dynamic-popup可以帮到你。您仍然需要在弹出窗口内容中标记jQuery Mobile代码。我在制作中使用它，但是用于简单的消息。

jQuery Mobile动态创建弹出窗口和内容的最佳方式

3 个答案: