Create a Pop up just by clicking

Question

Create a Pop up just by clicking

Navigation

#1 by (0 votes)

0

Hi friends maybe it's easy what I ask but I need to know how to create a pop up by clicking on a link. If someone has an idea, I would appreciate it a lot

javascript html5 html css3 css

asked by Alst Adm 05.11.2018 в 07:07

source

1 answer

display data from a mysql query in input text PermissionError: [Errno 13] Permission denied

score 0 · Accepted Answer

I'll leave you this code, I hope you serve my friend.

CSS Code

        .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); 
    -webkit-transition: opacity 400ms ease-in; 
    -moz-transition: opacity 400ms ease-in; 
    transition: opacity 400ms ease-in; 
} 
.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; 
    }

You add the HTML

    <a href="#openModal">Abrir el Pop up</a> 
    <div id="openModal" class="modalDialog">    
    <div>       
    <a href="#close" title="Close" class="close">X</a>      
    <h2>Titulo del Pop up (Si lo deseas)</h2>               
    <p>Puedes hacer un montón de cosas aquí, como alertas imagenes enlaces o incluso crear un formulario de registro aquí mismo.</p>    
    </div> </div>