Escribí una barra de alerta como esta:
alertmsg{
font-family:Arial,Helvetica,sans-serif;
font-size:135%;
font-weight:bold;
overflow: hidden;
width: 100%;
text-align: center;
position: fixed;
top: 0px;
left: 0px;
background-color: #fff;
height: 56px;
color: #000;
font: 20px/40px arial, sans-serif;
display:none;
padding-top:12px;
-webkit-box-shadow: 3px 3px 5px #888;
-moz-box-shadow: 3px 3px 5px #888;
box-shadow: 3px 3px 5px #888;
}
function alertbar(m, timeout){
if(!timeout){
var timeout = 3000;
}
var $alertdiv = $('<div id = "alertmsg"/>');
$alertdiv.text(m);
$alertdiv.bind('click', function() {
$(this).slideUp(200);
});
$(document.body).append($alertdiv);
$("#alertmsg").slideDown("slow");
setTimeout(function() { $alertdiv.slideUp(200) }, timeout);
return false
}
Bastante simple. Llamo a alertbar("Go go go!");
para que se despliegue esta alerta.
Sin embargo, cubre la página del cuerpo. Quiero que "empuje" hacia abajo en toda la página (todos los elementos) ... algo así como StackOverflow lo hace, supongo.
3 respuestas
Creo que es el position: fixed
que es tu problema. Esto colocará su elemento en relación con la ventana y lo sacará del flujo normal.
Use position:static
(o relative
) y asegúrese de que el elemento alertmsg
esté en la parte superior del marcado.
Si desea mantener el position: fixed
, simplemente expanda el relleno superior del cuerpo al tamaño del cuadro de alerta.
$("#alertmsg").slideDown("slow", function() {
var paddingTopStr = "+" + $(this).outerHeight().toString() + "px";
$('body').css({ paddingTop: paddingTopStr });
});
También deberá devolver el relleno después de:
setTimeout(function() {
var paddingTopStr = "-" + $(this).outerHeight().toString() + "px";
$('body').css({ paddingTop: paddingTopStr });
$alertdiv.slideUp(200) }, timeout);
}
Lo mismo para el evento de clic.
Podrías envolver el resto de tu contenido (para ser empujado hacia abajo) en un div separado y luego insertar tu barra de alerta antes de que
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.