html5 - transparente - ventana modal jquery ejemplo

jQuery Mobile: la mejor manera de crear ventanas emergentes y contenido de forma dinámica

Question

Tengo el siguiente código creando una ventana emergente usando jQuery mobile. Se crea la ventana emergente y se crea un formulario y se adjunta a la ventana emergente junto con dos botones. Este código funciona, pero me pregunto si hay una mejor manera de lograr mi objetivo previsto.

 //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

Primero un buceo emergente con tu contant

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

Botón para abrir ventana emergente

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

Haga clic para el botón

$(''#snap_view_btn'').click(function() {
$(''#popupPhotoLandscape'').popup();
$(''#popupPhotoLandscape'').popup("open");
});

Página inicial

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

Answer 2

Su ejemplo es excelente, este es un ejemplo de póster sobre cómo se debe crear el contenido dinámico de jQuery / jQuery Mobile.

Cambia solo tres cosas:

• Al final, debe agregar una ventana emergente a la página jQuery Mobile necesaria porque no va a funcionar fuera de un div de data-role = "page".
• Cambiar la función de enlace a la función en . On es un método mucho más rápido de vinculación de eventos. Y está aquí para reemplazar vincular y delegar.
• Compruebe si su código va a funcionar en navegadores de kits web como Chrome. Chrome tiene un error desagradable que evita que se abran ventanas emergentes programáticas en todos los eventos de la página, excepto el show de páginas . Más información sobre este problema: https://.com/a/15830353/1848600

Answer 3

https://github.com/serbanghita/jQM-dynamic-popup puede ayudarlo. Aún debe marcar el código de jQuery Mobile dentro del contenido de la ventana emergente. Estoy usando esto en producción, pero para mensajes simples.