17

我有以下代码使用 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");
4

3 回答 3

9

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

只改变三件事：

  • 最后，您应该将弹出窗口附加到所需的 jQuery Mobile 页面，因为它不会在 data-role="page" div 之外工作。
  • 将函数绑定更改为on 上的函数。On 是更快的事件绑定方法。它在这里替换绑定和委托。
  • 检查您的代码是否可以在 Chrome 等 Web 工具包浏览器中运行。Chrome 有一个讨厌的错误，它会阻止在除pageshow之外的每个页面事件中打开程序化弹出窗口。有关此问题的更多信息：https ://stackoverflow.com/a/15830353/1848600
于 2013-04-15T13:16:12.593 回答
0

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

于 2013-09-30T10:53:55.663 回答
0

首先是与您的联系的弹出式潜水 

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

页面初始化

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

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

 });

 });
于 2013-04-15T13:12:38.440 回答