javascript - developers - twitter timeline css
Construir dinámicamente el modo de arranque de Twitter. (5)
Estoy creando una aplicación de Rails, y quiero colocar el contenido de un Rails parcial en el modal a través de AJAX.
En un Twitter Bootstrap 2.3.2 modal, leí a través de la documentación que puede cargar contenido a través de ajax con la tecla remota.
http://getbootstrap.com/2.3.2/javascript.html#modals
Sin embargo, esto solo permite que el contenido se inyecte en el .modal-body , en lugar de construir todo el modal dinámicamente.
¿Hay una manera de construir todo el modal, incluyendo .modal-header , .modal-footer , dinámicamente con JS?
Parece muy torpe hacer esto con una cuerda, como sigue:
partial = render_to_string(:partial => ''some-partial'').gsub(%{"}, %{''}).gsub(/''/,"////'").gsub("/n", "")
Tema muy similar a la respuesta aceptada pero escrito como un complemento de jQuery. Estaba buscando alguna lógica para construir en un conjunto de herramientas en el que estoy trabajando, pero no pude encontrar ninguna, así que escribí esto.
Abajo hay un montón de código, pero está diseñado para escribirse una vez y luego llamarlo fácilmente, así que como un spoiler, una vez que lo tienes todo configurado, es tan fácil de usar como:
$.fn.alert("utils.js makes this so easy!");
Y como ejemplo completo de trabajo:
https://jsfiddle.net/63zvqeff/
No es necesario que exista <div /> en la página, y funciona con diálogos anidados, se toma de un conjunto de herramientas en el que estoy trabajando, así que he incluido todos los bits relevantes, así que es una copia / pegado de trabajo ejemplo.
(function ($)
{
$.utils = {
// http://.com/a/8809472
createUUID: function ()
{
var d = new Date().getTime();
if (window.performance && typeof window.performance.now === "function")
{
d += performance.now(); //use high-precision timer if available
}
var uuid = ''xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx''.replace(/[xy]/g, function (c)
{
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c == ''x'' ? r : (r & 0x3 | 0x8)).toString(16);
});
return uuid;
}
}
$.fn.dialogue = function (options)
{
var defaults = {
title: "", content: $("<p />"),
closeIcon: false, id: $.utils.createUUID(), open: function () { }, buttons: []
};
var settings = $.extend(true, {}, defaults, options);
// create the DOM structure
var $modal = $("<div />").attr("id", settings.id).attr("role", "dialog").addClass("modal fade")
.append($("<div />").addClass("modal-dialog")
.append($("<div />").addClass("modal-content")
.append($("<div />").addClass("modal-header")
.append($("<h4 />").addClass("modal-title").text(settings.title)))
.append($("<div />").addClass("modal-body")
.append(settings.content))
.append($("<div />").addClass("modal-footer")
)
)
);
$modal.shown = false;
$modal.dismiss = function ()
{
// loop until its shown
// this is only because you can do $.fn.alert("utils.js makes this so easy!").dismiss(); in which case it will try to remove it before its finished rendering
if (!$modal.shown)
{
window.setTimeout(function ()
{
$modal.dismiss();
}, 50);
return;
}
// hide the dialogue
$modal.modal("hide");
// remove the blanking
$modal.prev().remove();
// remove the dialogue
$modal.empty().remove();
$("body").removeClass("modal-open");
}
if (settings.closeIcon)
$modal.find(".modal-header").prepend($("<button />").attr("type", "button").addClass("close").html("×").click(function () { $modal.dismiss() }));
// add the buttons
var $footer = $modal.find(".modal-footer");
for(var i=0; i < settings.buttons.length; i++)
{
(function (btn)
{
$footer.prepend($("<button />").addClass("btn btn-default")
.attr("id", btn.id)
.attr("type", "button")
.text(btn.text)
.click(function ()
{
btn.click($modal)
}))
})(settings.buttons[i]);
}
settings.open($modal);
$modal.on(''shown.bs.modal'', function (e) {
$modal.shown = true;
});
// show the dialogue
$modal.modal("show");
return $modal;
};
})(jQuery);
Luego escribí una función de ayuda para esos momentos en los que solo querías una alerta básica ()
(function ($)
{
$.fn.alert = function (message)
{
return $.fn.dialogue({
title: "Alert",
content: $("<p />").text(message),
closeIcon: true,
buttons: [
{ text: "Close", id: $.utils.createUUID(), click: function ($modal) { $modal.dismiss(); } }
]
});
};
})(jQuery);
De lo contrario, debe crear su contenido como un objeto jQuery y luego pasarlo en la forma de un objeto como:
{
title: "", // what ever you want in the title bar
content: $("<p />"), // any DOM structure you can build as a jQuery object
closeIcon: false, // does the dialogue have a X in the tilte bar to close it
id: $.utils.createUUID(), // a reference id
open: function () { }, // a function called after the DOM structure is built but BEFORE rendering
buttons: [ // an array of buttons to include in the footer
// example "close" button, all buttons get a reference to $modal passed into them
// .dismiss() is a function attached to $modal to revert the DOM changes
{ text: "Close", click: function ($modal) { $modal.dismiss(); } }
]
};
Tuve el mismo problema, después de investigar mucho, finalmente construí una función js para crear modales dinámicamente según mis requisitos. Usando esta función, puedes crear ventanas emergentes en una línea como:
puyModal ({título: ''Título de la prueba'', encabezado: ''Encabezado'', mensaje: ''Este es un mensaje de muestra.''})
O puede usar otra funcionalidad compleja como iframes, ventanas emergentes de video, etc.
Encuéntrelo en https://github.com/aybhalala/puymodals Para ver una demostración, vaya a http://pateladitya.com/puymodals/
Usando DOM, he creado el botón así como el modo Bootstrap que aparece tan pronto como se hace clic en el botón.
Incluya estos también en la sección de encabezado de la página HTML:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src= "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script
src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
Todo este código debe estar escrito en el archivo JS.
// En primer lugar, la creación de un botón que al hacer clic muestra el modo Bootstrap
var button = document.createElement("input");
button.className = ''btn btn-info btn-lg'';
button.setAttribute("type", "button");
button.setAttribute("data-toggle", "modal");
button.setAttribute("data-target", "#myModal");
button.setAttribute("value", "More Information...");
document.getElementsByTagName(''body'')[0].appendChild(button);
// CREACIÓN MODAL:
var div1 = document.createElement(''div'');
div1.id = ''myModal'';
div1.className = ''modal fade'';
div1.setAttribute("role", "dialog");
var innerDiv1m = document.createElement(''div'');
innerDiv1m.className = ''modal-dialog modal-sm'';
div1.appendChild(innerDiv1m);
var innerDiv2m = document.createElement(''div'');
innerDiv2m.className = ''modal-content'';
innerDiv1m.appendChild(innerDiv2m);
var innerDiv3 = document.createElement(''div'');
innerDiv3.className = ''modal-header'';
innerDiv2m.appendChild(innerDiv3);
var buttonM = document.createElement("button");
buttonM.className = ''close'';
buttonM.setAttribute("data-dismiss", "modal");
buttonM.setAttribute("aria-hidden", "true");
buttonM.setAttribute("value", "Close");
innerDiv3.appendChild(buttonM);
var headerM = document.createElement("H4");
headerM.className = ''modal-title'';
innerDiv3.appendChild(headerM);
var innerDiv31 = document.createElement(''div'');
innerDiv31.className = ''modal-body'';
innerDiv2m.appendChild(innerDiv31);
var para = document.createElement(''p'');
innerDiv31.appendChild(para);
para.innerHTML = "paragraph";
var innerDiv32 = document.createElement(''div'');
innerDiv32.className = ''modal-footer'';
innerDiv2m.appendChild(innerDiv32);
var closeButton = document.createElement("input");
closeButton.className = ''btn btn-default'';
closeButton.setAttribute("data-dismiss", "modal");
closeButton.setAttribute("type", "button");
closeButton.setAttribute("value", "Close");
innerDiv32.appendChild(closeButton);
document.getElementsByTagName(''body'')[0].appendChild(div1);
// Por lo tanto, al hacer clic en el botón creado, el modal aparece en la pantalla.
Actualizar:
Desde que publiqué esto, he encontrado aquí una elegante función de envoltura modal de bootstrap 3, que no requiere agregar un div al código html.
Aquí hay un ejemplo de código que demuestra esto. Para usar, solo agregue un div en su <body> (dentro de <div class = "container"> de bootstrap, por ejemplo:
<div id="idMyModal"></div>
y luego puedes usarlo a través de:
var header = "This is my dynamic header";
var content = "This is my dynamic content";
var strSubmitFunc = "applyButtonFunc()";
var btnText = "Just do it!";
doModal(''idMyModal'', header, content, strSubmitFunc, btnText);
Para cerrar el modal, haga una llamada a hideModal, que también se define a continuación:
function doModal(placementId, heading, formContent, strSubmitFunc, btnText)
{
var html = ''<div id="modalWindow" class="modal hide fade in" style="display:none;">'';
html += ''<div class="modal-header">'';
html += ''<a class="close" data-dismiss="modal">×</a>'';
html += ''<h4>''+heading+''</h4>''
html += ''</div>'';
html += ''<div class="modal-body">'';
html += ''<p>'';
html += formContent;
html += ''</div>'';
html += ''<div class="modal-footer">'';
if (btnText!='''') {
html += ''<span class="btn btn-success"'';
html += '' onClick="''+strSubmitFunc+''">''+btnText;
html += ''</span>'';
}
html += ''<span class="btn" data-dismiss="modal">'';
html += ''Close'';
html += ''</span>''; // close button
html += ''</div>''; // footer
html += ''</div>''; // modalWindow
$("#"+placementId).html(html);
$("#modalWindow").modal();
}
function hideModal()
{
// Using a very general selector - this is because $(''#modalDiv'').hide
// will remove the modal window but not the mask
$(''.modal.in'').modal(''hide'');
}
Actualizar
Recientemente me topé con bootbox.js que es una biblioteca completa dedicada a crear dinámicamente los modos de arranque y reaccionar a la interacción de los usuarios con ellos. Aunque es diferente al método a continuación, bootbox acepta devoluciones de llamada en lugar de un nombre de función. Personalmente no lo he usado todavía porque no puedo justificar una biblioteca de 26kb para hacer esencialmente lo que hace la función siguiente. Pero pensé que alguien podría encontrarlo útil.
Actualización 8/17/2016
Ahora uso bootbox para casi todos los proyectos que necesito modales dinámicos. Funciona muy bien y lo recomiendo altamente.
Actualización 10/1/2018
Bootbox no es oficialmente compatible con bootstrap 4 todavía, pero hay una rama v5.x de bootbox donde están trabajando en la compatibilidad con bootstrap 4. De acuerdo con la hoja de ruta 5.0.0 y el boleto de la lista de envíos de Bootbox 5.0 , parece que la sucursal está bastante lista, pero aún no la han lanzado. Pero hay algunas instrucciones sobre cómo usarlo. Descargo de responsabilidad: todavía no he usado v5.x y no puedo responder por su integridad.
Mensaje original
Código tomado de la respuesta de Ammon arriba. Actualización para bootstrap 3.0
function doModal(placementId, heading, formContent, strSubmitFunc, btnText)
{
html = ''<div id="modalWindow" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirm-modal" aria-hidden="true">'';
html += ''<div class="modal-dialog">'';
html += ''<div class="modal-content">'';
html += ''<div class="modal-header">'';
html += ''<a class="close" data-dismiss="modal">×</a>'';
html += ''<h4>''+heading+''</h4>''
html += ''</div>'';
html += ''<div class="modal-body">'';
html += formContent;
html += ''</div>'';
html += ''<div class="modal-footer">'';
if (btnText!='''') {
html += ''<span class="btn btn-success"'';
html += '' onClick="''+strSubmitFunc+''">''+btnText;
html += ''</span>'';
}
html += ''<span class="btn" data-dismiss="modal">'';
html += <?php echo "''".__t("Close")."''"; ?>;
html += ''</span>''; // close button
html += ''</div>''; // footer
html += ''</div>''; // content
html += ''</div>''; // dialog
html += ''</div>''; // modalWindow
$("#"+placementId).html(html);
$("#modalWindow").modal();
$("#dynamicModal").modal(''show'');
}
Esto es lo que terminé usando para mis necesidades. También incluye un controlador de eventos para eliminar el modal del DOM una vez que se cierra. Solo necesitaba una información modal, así que saqué la función de envío y los argumentos de texto de los botones.
function doModal(heading, formContent) {
html = ''<div id="dynamicModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirm-modal" aria-hidden="true">'';
html += ''<div class="modal-dialog">'';
html += ''<div class="modal-content">'';
html += ''<div class="modal-header">'';
html += ''<a class="close" data-dismiss="modal">×</a>'';
html += ''<h4>''+heading+''</h4>''
html += ''</div>'';
html += ''<div class="modal-body">'';
html += formContent;
html += ''</div>'';
html += ''<div class="modal-footer">'';
html += ''<span class="btn btn-primary" data-dismiss="modal">Close</span>'';
html += ''</div>''; // content
html += ''</div>''; // dialog
html += ''</div>''; // footer
html += ''</div>''; // modalWindow
$(''body'').append(html);
$("#dynamicModal").modal();
$("#dynamicModal").modal(''show'');
$(''#dynamicModal'').on(''hidden.bs.modal'', function (e) {
$(this).remove();
});
}