HTML/CSS Popup cedola il testo clicca

voglio fare popup div invece di finestra pop-up per il mio 'About' immagine/pagina con il tasto corrente come in questo esempio: OMG! Ubuntu! Facebook like popup HTML/CSS Popup cedola il testo clicca

fonte

2013-09-28 Abac

Domande per chiedere il codice dovrebbe mostrare un minimo ** ** comprensione del problema. Ciò significa che dovrai includere soluzioni tentate, perché non hanno funzionato e i risultati attesi ** nella tua domanda **. – Sumurai8

È possibile utilizzare: Reveal jQuery Modals: http://zurb.com/playground/reveal-modal-plugin –

127

DEMO

Nell'area del contenuto è possibile fornire tutto ciò che si desidera visualizzare.

.black_overlay { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0%; 
 
    left: 0%; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: black; 
 
    z-index: 1001; 
 
    -moz-opacity: 0.8; 
 
    opacity: .80; 
 
    filter: alpha(opacity=80); 
 
} 
 
.white_content { 
 
    display: none; 
 
    position: absolute; 
 
    top: 25%; 
 
    left: 25%; 
 
    width: 50%; 
 
    height: 50%; 
 
    padding: 16px; 
 
    border: 16px solid orange; 
 
    background-color: white; 
 
    z-index: 1002; 
 
    overflow: auto; 
 
}

<html> 
 

 
<head> 
 
    <title>LIGHTBOX EXAMPLE</title> 
 
</head> 
 

 
<body> 
 
    <p>This is the main content. To display a lightbox click <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a> 
 
    </p> 
 
    <div id="light" class="white_content">This is the lightbox content. <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a> 
 
    </div> 
 
    <div id="fade" class="black_overlay"></div> 
 
</body> 
 

 
</html>

fonte

2013-09-28 08:35:36 coder

+10

Grande codice, ma entrambe le posizioni devono essere 'fixed'. Se l'utente fa clic sul collegamento dopo averlo fatto scorrere, la finestra overlay e modale si sposta in cima alla pagina. – Kasperi

Per chiunque sia interessato, se si desidera che l'overlay "espandi passato" al viewport (ad esempio, occupi l'intera pagina) Imposta la posizione su fisso. Questo farà apparire come se l'intera pagina avesse l'overlay. – taylorcressy

Si può semplicemente utilizzare jQuery UI Dialog

Esempio:

$(function() { 
 
    $("#dialog").dialog(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>jQuery UI Dialog - Default functionality</title> 
 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
 
</head> 
 

 
<body> 
 
    <div id="dialog" title="Basic dialog"> 
 
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
 
    </div> 
 
</body> 
 
</html>

fonte

2013-09-28 08:34:41

Per ragioni di completezza, ciò che si sta cercando di creare è una "finestra modale".

Numerose soluzioni JS ti consentono di crearle con facilità, prenditi il tempo di trovare quello più adatto alle tue esigenze.

ho usato Tinybox 2 per i piccoli progetti: http://sandbox.scriptiny.com/tinybox2/

fonte

2013-09-28 08:39:29

Il richiedente chiede informazioni sul pop-up HTML all'interno della pagina, non sulla "finestra modale". – dns

NON consiglierei TinyBox. Non documentato e il codice sorgente è offuscato. Avrai sempre problemi. – John

HTML/CSS Popup cedola il testo clicca

risposta

Problemi correlati