SOPA Popup

Cómo instalar el popup en tu sitio:

Más info en http://www.derechoaleer.org/2012/01/18-de-enero-primer-apagon-de-internet-en-contra-sopa.html

1) Subir a tu servidor la librería jqModal para jQuery:

jqModal.js

...y estas imágenes

sopa-popup-header.png
mafalda.png

2) En la sección head de tu sitio, colocar este código:
atención:
- Incluir las rutas correspondientes a los archivos, en caso de que no estén en la misma carpeta.
- Asegurarse que jqModal y jQuery no estén cargados previamente, sino eliminar la/s línea/s

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jqModal.js"></script>

<link type="text/css" rel="stylesheet" media="all" href="popup.css" />

<script type="text/javascript">

<!--//--><![CDATA[//><!--
function openPop(){
   $('#mafalda').css({opacity: 0.0, visibility: "visible", display: "none"});
   $('#dialog').jqmShow();
   setTimeout ("showMafalda();", 5000); // <== cambiar este valor para modificar tiempo que tarda en aparecer mafalda 
}

function showMafalda(){
  $('#mafalda').css({display: "block"});
  $('#mafalda').animate({opacity:1});
}

$().ready(function() {

   $('#dialog').jqm({overlay:70,modal:true});
   openPop();
});
//--><!]]>
</script>

<style>
.jqmWindow {
 display: none;font-family: Arial, sasn-serif; position: fixed;
 top: 10%;left: 50%;margin-left: -430px;width: 860px;
 background: url(sopa-popup-header.png) no-repeat 0 0 white;
 border: 1px solid black; padding: 168px 0 0 0;
}

#mafalda {
 opacity:0.0;width: 510px;height: 366px;background-color: transparent;
 position: absolute;bottom: -20px; right: 0;
}

.jqmWindow h3 {
 font-family: Helvetica,Arial,sans-serif;font-size: 24px;
 font-weight: bold;margin: 0 0 20px;text-align: center;
}

.jqmWindow h4 { font-size: 18px;margin: 0 0 20px;text-align: center;}

.jqmWindow p, .jqmWindow li {font-size: 16px; line-height: 21px;}

.jqmWindow li {margin: 0;}

.jqmWindow .container { padding: 12px 28px;}

.jqmClose {}

#close {
 position:absolute;
 top:0;right:0;display:block;width:56px;height:34px;text-indent: -5000px;
}

.jqmOverlay { background-color: #000; }

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
</style>

3) Al final de la sección body de tu sitio, colocar este código:


<div class="jqmWindow" id="dialog" style="display: none;">
  <a href="#" class="jqmClose" id="close">Close</a>
  <a href="#" class="jqmClose" id="mafalda"><img src="mafalda.png" /></a>
  <div class="container" style="margin: 0; word-wrap: break-word; white-space: normal;">
    <h3>This website has been blocked by the U.S. Government, in pursuance of the 
powers granted by the current legislation on Intellectual Property and Trademark 
Anti-Counterfeiting enforcement</h3>

    <h4>Type of discharge requested by the complainant:<br /> <i>use of copyrighted
material without permission from their copyright holders</i>.</h4>

    <p><b style="color: red;">Warning</b>: In the next 7 (seven) days the following
services must cease any civil or commercial relationship with this website, or will be considered 
co-responsible for criminal offenses under Section 102 of the Anti-Piracy Act § 28 § 01 § 2012.
    <ul>
      <li> The Internet Service Providers must change their DNS servers to block access to 
this domain.
      <li> Online Payment Systems should block any accounts related to this website.
      <li> Search Services should remove links to this site.
      <li> Online Advertising Systems should discontinue the services were contracted 
with this website.
    </ul>

    <p>You consider yourself notified.</p>
  </div>
</div>