Estoy diseñando una página web. Cuando hacemos clic en el contenido del correo electrónico llamado div, ¿cómo puedo mostrar una ventana emergente que contiene una etiqueta de correo electrónico y un cuadro de texto?Cómo generar una ventana emergente simple usando jQuery
Respuesta
Algo este sencillo no necesita un plugin. Esto puede parecer mucho código, pero es bastante simple.
primer lugar, el CSS - ajustar esto, sin embargo te gusta:
a.selected {
background-color:#1F75CC;
color:white;
z-index:100;
}
.messagepop {
background-color:#FFFFFF;
border:1px solid #999999;
cursor:default;
display:none;
margin-top: 15px;
position:absolute;
text-align:left;
width:394px;
z-index:50;
padding: 25px 25px 20px;
}
label {
display: block;
margin-bottom: 3px;
padding-left: 15px;
text-indent: -15px;
}
.messagepop p, .messagepop.div {
border-bottom: 1px solid #EFEFEF;
margin: 8px 0;
padding-bottom: 8px;
}
Y el JavaScript:
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#contact').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('#contact'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
Y finalmente el html:
<div class="messagepop pop">
<form method="post" id="new_message" action="/messages">
<p><label for="email">Your email or name</label><input type="text" size="30" name="email" id="email" /></p>
<p><label for="body">Message</label><textarea rows="6" name="body" id="body" cols="35"></textarea></p>
<p><input type="submit" value="Send Message" name="commit" id="message_submit"/> or <a class="close" href="/">Cancel</a></p>
</form>
</div>
<a href="/contact" id="contact">Contact Us</a>
Here is a jsfiddle demo and implementation.
Dependiendo de la situación, es posible que desee cargar el contenido emergente mediante una llamada ajax. Lo mejor es evitar esto si es posible, ya que puede dar al usuario un retraso más significativo antes de ver el contenido. Aquí hay algunos cambios que querrás hacer si tomas este enfoque.
HTML se convierte en:
<div>
<div class="messagepop pop"></div>
<a href="/contact" id="contact">Contact Us</a>
</div>
Y la idea general del JavaScript se convierte en:
$("#contact").on('click', function() {
if($(this).hasClass("selected")) {
deselect();
} else {
$(this).addClass("selected");
$.get(this.href, function(data) {
$(".pop").html(data).slideFadeToggle(function() {
$("input[type=text]:first").focus();
});
}
}
return false;
});
Su funcionamiento, gracias. Pero voy a incluir otro botón de registro de llamadas. cuando se hace clic en él, debe aparecer el formulario de registro. Para eso incluí la misma función y cambié el nombre de los identificadores y las clases. El problema es cuando hago clic en el botón Cerrar del formulario de registro, alterna el formulario de contacto. ¿Necesita ayuda @ Jason Davis – Rajasekar
para eliminar el html se agrega en una estrecha cambio el método de cerca $ ("estrechos "). Vivo ('clic', function() { \t \t \t $ (". Pop") .slideFadeToggle(); \t \t \t $ ("# contact") removeClass ("seleccionado");. \t \t \t $ ("pop".) remove();. // añadir este ... \t \t \t return false; \t \t \t}); Esto corregirá el problema que aparece al hacer clic en el enlace más de una vez antes de cerrar la ventana emergente. buena respuesta por cierto, pulido y simple ... – Jonx
Implementado: http: // jsfiddle.net/B4t3V/ – Yahel
Consulte jQuery UI Dialog. Se podría utilizar de esta manera:
El jQuery:
$(document).ready(function() {
$("#dialog").dialog();
});
El marcado:
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
hecho!
Tenga en cuenta que se trata del caso de uso más simple que hay, sugiero leer el documentation para tener una mejor idea de qué se puede hacer con él.
¿Aparte de Jquery si tengo que incluir algún plugin? @Karim – Rajasekar
@Rajasekar - Deberá descargar el paquete jQuery UI y, como mínimo, incluir ui.core.js y ui.dialog.js para obtener un Diálogo. Si desea que el diálogo sea arrastrable y/o redimensionable, deberá incluir ui.draggable.js y ui.resizable.js. – karim79
Hmm. Sería una mejor respuesta con un jsfiddle. – Bryce
No es un buen ejemplo sencillo de exactamente esto, aquí: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
¿Aparte de Jquery si tengo que incluir algún plugin? @Karim – Rajasekar
Puedo usar un plugin de jQuery llamado ColorBox, es
- muy fácil de usar
- liviano
- personalizable
- el diálogo emergente más bonito que he visto para jQuery todavía
Visita esta URL
Creo que este es un great tutorial en la escritura de un simple emergente jQuery.Además, se ve muy bien beautiful
Pruebe el Magnific Popup, es sensible y pesa alrededor de 3KB.
Aquí es un emergente muy simple:
<!DOCTYPE html>
<html>
<head>
<style>
#modal {
position:absolute;
background:gray;
padding:8px;
}
#content {
background:white;
padding:20px;
}
#close {
position:absolute;
background:url(close.png);
width:24px;
height:27px;
top:-7px;
right:-7px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var modal = (function(){
// Generate the HTML and add it to the document
$modal = $('<div id="modal"></div>');
$content = $('<div id="content"></div>');
$close = $('<a id="close" href="#"></a>');
$modal.hide();
$modal.append($content, $close);
$(document).ready(function(){
$('body').append($modal);
});
$close.click(function(e){
e.preventDefault();
$modal.hide();
$content.empty();
});
// Open the modal
return function (content) {
$content.html(content);
// Center the modal in the viewport
$modal.css({
top: ($(window).height() - $modal.outerHeight())/2,
left: ($(window).width() - $modal.outerWidth())/2
});
$modal.show();
};
}());
// Wait until the DOM has loaded before querying the document
$(document).ready(function(){
$('a#popup').click(function(e){
modal("<p>This is popup's content.</p>");
e.preventDefault();
});
});
</script>
</head>
<body>
<a id='popup' href='#'>Simple popup</a>
</body>
</html>
solución más flexible se pueden encontrar en este tutorial: http://www.jacklmoore.com/notes/jquery-modal-tutorial/ Aquí es close.png para la muestra.
Complemento emergente modal extremadamente liviano. POPELT - http://welbour.com/labs/popelt/
Es liviano, admite ventanas emergentes anidadas, orientado a objetos, admite botones dinámicos, sensible y mucho más. La próxima actualización incluirá presentaciones de formularios Popup Ajax, etc.
Siéntase libre de utilizar y tweetear comentarios.
Ventana emergente simple mediante html5 y javascript.
html: -
<dialog id="window">
<h3>Sample Dialog!</h3>
<p>Lorem ipsum dolor sit amet</p>
<button id="exit">Close Dialog</button>
</dialog>
<button id="show">Show Dialog</button>
JavaScript: -
(function() {
var dialog = document.getElementById('window');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('exit').onclick = function() {
dialog.close();
};
})();
Aparece un error 'TypeError: dialog.show no es una función'. ¿Podría incluir un JSFiddle? – Magiranu
SOLO CSS POPUP LÓGICA! INTENTE HACERLO. ¡FÁCIL! Creo que este truco mybe ser popular en el futuro
<a href="#openModal">OPEN</a>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" class="close">X</a>
<h2>MODAL</h2>
</div>
</div>
.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;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
}
.modalDialog:target {
display: block;
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);
}
¡No cierra! – vy32
- 1. Crear una ventana emergente modal simple
- 2. Usando JQuery para abrir una ventana emergente e imprimir
- 3. Ventana emergente jQuery Valor devuelto a principal
- 4. Stackoverflow como ventana emergente modal en jquery
- 5. Abrir una ventana emergente modal
- 6. Cómo cerrar una ventana usando jQuery
- 7. ¿Cómo abro una nueva ventana usando jQuery?
- 8. ¿Cómo cerrar una ventana emergente de Liferay.util.openWindow?
- 9. ¿Cómo crear una ventana emergente en android?
- 10. ¿Cómo puedo cargar una página externa en una ventana emergente de jQuery?
- 11. Copiar HTML de un documento original en una ventana emergente (usando JQuery)
- 12. Ventana emergente, Pantalla central
- 13. Abrir página en una nueva ventana sin ventana emergente
- 14. jquery puede hacer esto? ventana emergente para el valor
- 15. Editar texto en una ventana emergente
- 16. ¿Cómo imprimir una página web sin abrir una ventana emergente?
- 17. ¿Es posible generar XML simple usando Haml?
- 18. ¿Cómo hacer un formulario emergente modal simple usando jquery y html?
- 19. Ventana emergente en winforms
- 20. ¿Cómo crear una pequeña ventana emergente en iOS?
- 21. WPF ventana emergente
- 22. Ventana emergente con imagen
- 23. Ventana emergente en Java Swing
- 24. JavaScript/jQuery - Abrir enlace actual en la ventana emergente
- 25. ¿Cómo abrir una actividad en una ventana emergente?
- 26. cómo hacer una animación para una ventana emergente en android
- 27. Cómo crear una ventana emergente modal utilizando JavaScript y CSS
- 28. Establecer la ventana emergente para centro de jQuery
- 29. Google Plus compartir en una ventana emergente
- 30. WP7: ¿girando una ventana emergente + contenido?
encontré esta [respuesta] (http://stackoverflow.com/a/15466856/240803) muy útil para alertas rápidas sin tocar el código HTML o CSS existente. Crea y muestra un div solo usando jQuery de js. – mabi