javascript - 将 cookie 横幅放在页面的最顶部，并始终位于中心

标签 javascript html css cookies resolution

我所在国家/地区的政策迫使我为我的网站放置一个警告横幅 cookie。我把它放在下面的代码中:

<script src="http://j.maxmind.com/app/geoip.js"></script>
<div id="cookie" style="display:none;position:relative;left:0px;right:0px;top:0px;width:100%;min-height:30px;background: #000000;color:#ffffff;z-index: 99999;">
<div style="width:100%;position:absolute;padding-left:600px;font-family:verdana;font-size:9px;top:30%;">
    Usamos cookies propias y de terceros para mejorar la navegación. Si continua navegando consideramos que acepta el uso de cookies.
    <a href="javascript:void(0)" style="padding:4px;background:#4682B4;text-decoration:none;color:#fff;" onclick="PonerCookie();"><b>OK</b></a>
    <a href="PAGINA" target="_blank" style="padding-left:5px;text-decoration:none;color:#000000;">Más información</a>
</div>
</div>
<script>
function getCookie(c_name){
    var c_value = document.cookie;
    var c_start = c_value.indexOf(" " + c_name + "=");
    if (c_start == -1){
        c_start = c_value.indexOf(c_name + "=");
    }
    if (c_start == -1){
        c_value = null;
    }else{
        c_start = c_value.indexOf("=", c_start) + 1;
        var c_end = c_value.indexOf(";", c_start);
        if (c_end == -1){
            c_end = c_value.length;
        }
        c_value = unescape(c_value.substring(c_start,c_end));
    }
    return c_value;
}

function setCookie(c_name,value,exdays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
}

if(geoip_country_code()=="ES" && getCookie('aviso')!="1"){
    document.getElementById("cookie").style.display="block";
}
function PonerCookie(){
    setCookie('aviso','1',365);
    document.getElementById("cookie").style.display="none";
}
</script>

但我希望这个文本完全集中在我的浏览器上，在任何计算机上进入网站，它总是完全出现，文本在中心。我该怎么做？谢谢

我的 html:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BLOG</title>

        <!-- Attach our CSS -->
        <link rel="stylesheet" href="orbit-1.2.3.css"/>
        <link rel="stylesheet" href="demo-style.css"/>

        <!-- Attach necessary JS -->
        <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="jquery.orbit-1.2.3.min.js"></script>    

            <!--[if IE]>
                 <style type="text/css">
                     .timer { display: none !important; }
                     div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
                </style>
            <![endif]-->

        <!-- Run the plugin -->
        <script type="text/javascript">
            $(window).load(function() {
                $('#featured').orbit();
            });
        </script>

<link href="<?php $_SERVER['DOCUMENT_ROOT']?>/estilo-pagina-css" rel="stylesheet" type="text/css" />
<style type="text/css">

#contenedor {
    width: 900px;
    margin: 0 auto;
    height: 100%;
    background-color: #000000;
}
</style>
<script src="http://j.maxmind.com/app/geoip.js"></script>
<div id="cookie" style="display: fixed;background: #00000;overflow: hidden;color: #FFF;padding: 10px;">
<div style="padding:4px;background:#000000;text-decoration:none;color:#fff;">
    Usamos cookies propias y de terceros para mejorar la navegación. Si continua navegando consideramos que acepta el uso de cookies.
    <a href="javascript:void(0)" style="padding:4px;background:#4682B4;text-decoration:none;color:#fff;" onclick="PonerCookie();"><b>OK</b></a>
    <a href="PAGINA" target="_blank" style="padding-left:5px;text-decoration:none;color:#ffffff;">Más información</a>
</div>
</div>
<script>
function getCookie(c_name){
    var c_value = document.cookie;
    var c_start = c_value.indexOf(" " + c_name + "=");
    if (c_start == -1){
        c_start = c_value.indexOf(c_name + "=");
    }
    if (c_start == -1){
        c_value = null;
    }else{
        c_start = c_value.indexOf("=", c_start) + 1;
        var c_end = c_value.indexOf(";", c_start);
        if (c_end == -1){
            c_end = c_value.length;
        }
        c_value = unescape(c_value.substring(c_start,c_end));
    }
    return c_value;
}

function setCookie(c_name,value,exdays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
}

if(geoip_country_code()=="ES" && getCookie('aviso')!="1"){
    document.getElementById("cookie").style.display="block";
}
function PonerCookie(){
    setCookie('aviso','1',365);
    document.getElementById("cookie").style.display="none";
}
</script>
</head>
<body>
<div id="contenedor">
<div id="cabecera" >
  <object id="EdgeID" type="text/html" width="900" height="167" data-dw-widget="Edge" data="head/Assets/head.html">
  </object>
</div>
<div id="botonera"><?php include($_SERVER['DOCUMENT_ROOT']."/botonera.php"); ?></div>
<div id="sombra"></div>
<div id="para-contenido"></div>
<div id="centro">
        <div id="featured"> 
            <div class="content" style="">
                <h1></h1>
                <h3></h3>
            </div>
            <a href=""><img src="imagenes-presentacion/66.jpg" /></a>
            <img src="imagenes-presentacion/65B.jpg"  />
            <img src="imagenes-presentacion/38.jpg"  />
            <img src="imagenes-presentacion/8.jpg"  />
             <img src="imagenes-presentacion/9.jpg"  />
              <img src="imagenes-presentacion/12.jpg"  />
               <img src="imagenes-presentacion/7.jpg"  />
                <img src="imagenes-presentacion/65.jpg"  />
                  <img src="imagenes-presentacion/65B.jpg"  />
                   <img src="imagenes-presentacion/16.jpg"  />
                   <img src="imagenes-presentacion/29.jpg"  />
        </div>
</div>
<div id="para-contenido2"><?php include($_SERVER['DOCUMENT_ROOT']."/presentacion.php"); ?></div>
<div id="pie"><?php include($_SERVER['DOCUMENT_ROOT']."/pie.php"); ?></div>
</div>
</body>
</html>

CSS:

<style type="text/css">

#contenedor {
    width: 900px;
    margin: 0 auto;
    height: 100%;
    background-color: #000000;
    display: inline;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
background-image: url(<?php $_SERVER['DOCUMENT_ROOT']?>/imagenes-blog/fondo1.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top center;

}
#cabecera {
    width: 900px;
    height: 167px;
    background-color: #CCC;
}
#sombra {
    width: 900px;
    height: 21px;
    background-image: url(<?php $_SERVER['DOCUMENT_ROOT']?>/imagenes-blog/sombra.jpg);

}
#botonera {
    width: 900px;
    height: 21px;
background-image: url(<?php $_SERVER['DOCUMENT_ROOT']?>/imagenes-blog/2blog.jpg);

}
#pie {
    clear: both;
    width: 900px;
    height: 51px;
background-image: url(<?php $_SERVER['DOCUMENT_ROOT']?>/imagenes-blog/4blog.jpg);
}

#centro {
    width: 900px;
    height: 100%;
    background-image: url(<?php $_SERVER['DOCUMENT_ROOT']?>/imagenes-blog/fondo.jpg);
}
#para-contenido2 {
    width: 900px;
    height: 100%;
    background-image: url(<?php $_SERVER['DOCUMENT_ROOT']?>/imagenes-blog/fondo.jpg);
}

#centro_galeria {
    width: 900px;
    height: 100%;
    padding-top: 15px;
    background-image: url(<?php $_SERVER['DOCUMENT_ROOT']?>/imagenes-blog/fondo.jpg);
}

最佳答案

您想使用display: fixed。这将始终将 cookies div 作为横幅保留在顶部，直到被 javascript 删除。

除非你的意思是你希望它垂直和水平居中？这是可以做到的，但横幅不会让您的用户感到厌烦。

来一把 fiddle ! - Fiddle Link!

HTML

<div id="cookie">
    <div>cookies text
        <a href="javascript:void(0)" onclick="PonerCookie();"><b>OK</b></a>
        <a href="PAGINA" target="_blank">Más información</a>
    </div>
</div>

CSS

#cookie {
    display: fixed;
    background: #4682B4;
    overflow: hidden;
    color: #FFF;
    padding: 10px;
}

#cookie a {
    padding:4px;
    background:#4682B4;
    text-decoration:none;
    color:#fff;
    float: right;
}

关于javascript - 将 cookie 横幅放在页面的最顶部，并始终位于中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21869365/

上一篇：jquery - ie9 fallback for bootstrap carousel fade variation

下一篇：css - 显示 : inline not working properly

相关文章：

javascript - 如何根据多个数据属性过滤搜索结果

Javascript 视差在 Mac 上很慢

javascript - 实时图表和 iPad 应用程序

c# - 如何将选择选项值从 View 传递到 MVC5 中的 Controller

html - HTML/XHTML 中的勾号

jquery - 如何做出流畅的滑动导航？

javascript - for/if 循环根据 input::jquery 多次运行一个函数

javascript - 如何在类中扩展对象定义？

html - 如何更改外部元素的 CSS？

html - 行高问题

©2024 IT工具网  联系我们