How do I open a pop-up without using JavaScript?

Navigation
10

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

    
asked by anonymous 04.04.2015 / 23:49

4 answers

24

You can use CSS3 to create a popup , open and close it without resorting to JavaScript.

The trick is to use the pseudo class target which allows us to change declarations for the .modalDialog element and thus display 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 .

    
05.04.2015 / 00:02
8

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 on 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>
    
05.04.2015 / 00:21
5

The best you can do is force the opening on another tab (or window, who decides is the browser): 

<a href="http://google.com" target="_blank">Google</a>
    
04.04.2015 / 23:52
-1

I could do \ o / ... what do you guys think of the code? Can you improve? And if js is disabled in the client browser, would it have any way of running the code? 

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script><scriptlanguage="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.br/?gws_rd=ssl">Tweet</a>
    
06.04.2015 / 16:43
HTML / PHP Detect if form value changed Center image vertically within a div