javascript - cambiar - centrar contenido html
¿Cómo puedo hacer que un DIV se centre en una página usando jQuery y blockUI? (4)
Estoy tratando de convertir el '' Diálogo de confirmación YUI Style Yes / No '' de Matt Berseth para que pueda usarlo con el complemento jQuery blockUI.
Tengo que admitir que no soy un gurú de CSS, pero pensé que esto sería bastante fácil incluso para mí ... excepto 10 horas después, estoy perdido por el motivo por el que no puedo lograr que funcione.
El problema es que parece que no puedo hacer que el DIV ''confirmDialogue'' se centre en la página sin algunos artefactos que se muestran arriba. Alternativamente, si reinicio las configuraciones CSS de blockUI haciendo ...
$.blockUI.defaults.css = {};
..... Me parece que el DIV se alinea a la izquierda.
He intentado todo tipo de cosas pero CSS no es mi punto fuerte siendo un tipo de aplicación del lado del servidor un poco :(
Entonces, si alguien por ahí que es un asistente de jQuery / blockUI / CSS está leyendo esto ... por favor, ¿puedes intentarlo y decirme qué me estoy equivocando?
Básicamente, seguí la plantilla de diseño en el blog de Matt y el HTML se ve como el siguiente (el CSS no cambia desde la muestra de Matt). Puede tomar el archivo png ''sprite'' de la descarga completa del proyecto de muestra en http://mattberseth2.com/downloads/yui_simpledialog.zip - es un proyecto .net pero estoy tratando de hacer que esto funcione en un simple html archivo, por lo que no se requiere conocimiento de .NET.
De todos modos, cualquier consejo y guía sería realmente realmente útil. Incluso voy a incentivar las cosas que comprarán prometedoras para comprarte montones de cerveza si alguna vez nos encontramos :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script type="text/javascript" src="script/jquery-1.2.6.js"></script>
<script type="text/javascript" src="script/jquery.blockUI.js"></script>
<style>
.modalpopup
{
font-family: arial,helvetica,clean,sans-serif;
font-size: small;
padding: 2px 3px;
display: block;
position: absolute;
}
.container
{
width: 300px;
border: solid 1px #808080;
border-width: 1px 0px;
}
.header
{
background: url(img/sprite.png) repeat-x 0px -200px;
color: #000;
border-color: #808080 #808080 #ccc;
border-style: solid;
border-width: 0px 1px 1px;
padding: 3px 10px;
}
.header .msg
{
font-weight: bold;
}
.body
{
background-color: #f2f2f2;
border-color: #808080;
border-style: solid;
border-width: 0px 1px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 30px;
}
.body .msg
{
background: url(img/sprite.png) no-repeat 0px -1150px;
float: left;
padding-left: 22px;
}
.footer
{
background-color: #f2f2f2;
border-color: #808080;
border-style: none solid;
border-width: 0px 1px;
text-align:right;
padding-bottom: 8px;
padding-right: 8px;
}
.close
{
right: 7px;
background: url(img/sprite.png) no-repeat 0px -300px;
width: 25px;
cursor: pointer;
position: absolute;
top: 7px;
height: 15px;
}
.modalBackground
{
background-color:Gray;
filter:alpha(opacity=50);
opacity:0.5;
}
</style>
</head>
<body>
<input id="triggerDialogue" name="triggerDialogue" type="button" value="Go" />
<div id="confirmDialogue"
class="modalpopup" style="display:none; text-align: center">
<div class="container">
<div class="header">
<span class="msg">Are you sure?</span>
<a onclick="return false;" class="close"
href="javascript: return false;"></a>
</div>
<div class="body">
<span class="msg">Do you want to continue?</span>
</div>
<div class="footer">
<input type="button" id="Button1" value="Yes" style="width:40px" />
<input type="button" id="Button2" value="No" style="width:40px" />
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(''#triggerDialogue'').click(function() {
$.blockUI({ message: $(''#confirmDialogue'') });
});
});
</script>
</body>
</html>
@Owen - muchas gracias por eso. Tuve que hacer un pequeño cambio en la clase .modalPopup CSS en la hoja de estilo de Matt para:
position: fixed;
....y funciona. Muy apreciado. Realmente tengo que sentarme con mi libro de O''Reilly CSS, que nunca tengo la oportunidad de leer alguna noche ... :)
hmm, no estoy tan familiarizado con blockUI, pero los conceptos básicos de centrar un div son bastante universales. #confirmDialogue que quieres que tu div #confirmDialogue centrado en toda la pantalla.
si es así, quiere hacer algunas cosas:
#confirmDialogue {
position: fixed; // absolutely position this element on the page
height: 200px; // define your height/width so we can calculate with it after
width: 300px;
}
ahora tu jQuery:
$(''#triggerDialogue'').click(function() {
// to position #confirmDialogue, we need the window height/width
var msg = $(''#confirmDialogue'');
var height = $(window).height();
var width = $(document).width();
msg.css({
''left'' : width/2 - (msg.width() / 2), // half width - half element width
''top'' : height/2 - (msg.height() / 2), // similar
''z-index'' : 15, // make sure element is on top
});
// etc...
});
básicamente, desea corregir la posición de su #confirmDialogue (para que pueda #confirmDialogue en relación con el tamaño de su ventana / documento. Las declaraciones left y top se calculan en función de los elementos altura / ancho actuales, y la altura y el documento de la ventana) anchura.
También puedes probar el diálogo de jquery ui http://jqueryui.com/demos/dialog/
Eche un vistazo a este plugin jQuery MSG . Es muy ligero y fácil de usar.
Código de ejemplo
// default usage, this will block the screen and shows a ''please wait...'' msg
$.msg();
// this will show a ''blah blah'' msg
$.msg({ content : ''blah blah'' });
más opciones, consulte esta demostración
documentación completa, por favor eche un vistazo a esta publicación . los enlaces de descarga y de código fuente están incluidos en la publicación.
O si solo quieres centralizar algún elemento DOM, también puedes probar este complemento
Puede encontrar información útil aquí. Usar jQuery para centrar un DIV en la pantalla