How to open a pop-up without using Javascript?

Question

How to open a pop-up without using onclick or any other Javascript function?

Answer 1

You can use CSS3 to create a popup, open and close it without using Javascript.

The trick is in using pseudo class target which allows us to change declarations to the element .modalDialog and thus present the same.

Example

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}
.modalDialog > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
}
.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}
.close:hover {
  background: #00d9ff;
}

<a href="#openModal">Open Modal</a>

<div id="openModal" class="modalDialog">
  <div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Popup</h2>
    <p>Isto é uma popup toda bonitinha a funcionar apenas com CSS3.</p>
  </div>
</div>

^{Example in detail in (c) Webdesigner Depot.}

Answer 2

This method does not use Javascript or CSS3. It basically works like this: The page is inside a container and the popup is hidden in an overflow part of the container. When you click the anchor, the user is taken to that part of the container.

#container, #popup{
    width: 600px;
    height: 600px;
    overflow: hidden;
}
#pag{
    width: 600px;
    height: 1200px;
}
#popup{
    margin-top: 600px;
    background-color: grey
}

<div id="container">
    <div id="pag">
        <a href="#popup">Abrir popup</a><p>
        Conteúdo da pagina
        <div id="popup">
            <a href="#pag">fechar popup</a><p>
            Conteúdo da POPUP
        </div>
    </div>  
</div>

Answer 3

The best thing to do is to force the opening in another tab (or window, who decides is the browser):

<a href="http://google.com" target="_blank">Google</a>

Answer 4

I was able to do/... what do you think of the code? Can you improve? And if js is disabled in the client browser, would it have some way to execute the code?

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>  

<script language="JavaScript">
$(document).ready(function() {
$("#enviar").click(function( e ){
e.preventDefault();

var width = 550;
var height = 550;

var left = 99;
var top = 99;

window.open(enviar,'janela', 'width='+width+', height='+height+',top='+top+'left='+left+', scrollbars=yes, status=no, toolbar=no, location=no, directories=no, menubar=no, resizable=no, fullscreen=no');

 });
 });
</script>

<a href="https://twitter.com/share" id="enviar" data-text="https://www.google.com/?gws_rd=ssl">Tweet</a>