1
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:CSS3 - Bloque absoluto tipo prompt o ventana de alerta
« en: 14 de Agosto 2015, 13:38 »
Estaba buscando algo así para introducir el famoso mensaje de las cookies en una web que tengo y me lo has puesto en bandeja
Así me va quedando, solo me falta introducir la respuesta a ejecutar cuando se pulse en aceptar o rechazar
Salud!
Así me va quedando, solo me falta introducir la respuesta a ejecutar cuando se pulse en aceptar o rechazar
Citar
Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.
Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.
Aceptar Rechazar
Código: [Seleccionar]
<!DOCTYPE html>
<html lang=en> <head><meta name=viewport content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta charset=UTF-8><title>Centrar contenedor verticalmente de forma absoluta, SamML</title><style>
@charset "utf-8";*{margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}/*SamML para aprendeaprogramar.com*/
.contenedor:after, .contenedor:before {
display:table;
content:" ";
zoom:1;
}
.contenedor {
position:fixed;
width:100%;
height:100%;
padding:15px
}
.contenedor:after {clear:both;}
.absolute-v-center {
background-color: #444;
color:white;
position: fixed;
width:100%;top:0%;left:0%;
margin: 0;
z-index:1000;
padding:25px;
}
.absolute-v-center p{ margin-bottom:10px;}
@media (min-width:500px){
.absolute-v-center {top: 50%;left: 50%;width: 50%;margin: -15% 0 0 -25%;}
}
</style></head> <body> <div class=contenedor> <div class=absolute-v-center> <p>Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.</p> <p>Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.</p> <input type="button" value="Aceptar"/> <input type="button" value="Rechazar"/> </div> </div> <div> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> </div> <div class=container> <div> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> </div> </div> </body>
</html>
Salud!