jQuery Mobile - лучший способ динамически создавать всплывающие окна и контент

У меня есть следующий код создания всплывающего окна с помощью мобильного телефона jQuery. Создается всплывающее окно, создается форма и добавляется к нему вместе с двумя кнопками. Этот код работает, но мне интересно, есть ли лучший способ достичь моей намеченной цели.

    //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");
Источник

3 ответа

Решение

Ваш пример великолепен, это пример плаката, как следует создавать динамический контент jQuery/jQuery Mobile.

Изменить только три вещи:

  • В конце вы должны добавить всплывающее окно на нужную страницу jQuery Mobile, потому что она не будет работать вне div data-role="page".
  • Измените привязку функции к функции. Это гораздо более быстрый метод привязки событий. И это здесь, чтобы заменить связывание и делегирование.
  • Проверьте, будет ли ваш код работать в таких веб-браузерах, как Chrome. В Chrome есть неприятная ошибка, которая препятствует открытию программных всплывающихокон при каждом событии страницы, кроме pagehow. Больше информации об этой проблеме: /questions/44186201/jquery-mobile-vsplyivayuschee-okno-s-istoriej-lozhnyie-avtokosyi/44186238#44186238
Источник

https://github.com/serbanghita/jQM-dynamic-popup может помочь вам. Вам все еще нужно разметить код jQuery Mobile внутри содержимого всплывающего окна. Я использую это в производстве, но для простых сообщений.

Источник

Сначала всплывающее окно всплывающее с твоим продолжением

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

 });

 });
Источник
Другие вопросы по тегам