cuadro emergente de diálogo de jquery

Question

Estoy tratando de mostrar este cuadro emergente de diálogo cuando se hace clic en este enlace, pero no funciona para mí. He estado trabajando en esto durante las últimas tres horas y esto se está volviendo demasiado frustrante para mí.

Aquí es mi html

<a href="#" id="contactUs">Contact Us</a> 
<div id="dialog" title="Contact form"> 
    <p>appear now</p> 
</div> 

Y aquí está mi Javascript, esto es en un archivo externo.

$("#contactUs").click(function() { 
    $("#dialog").dialog("open"); 
    return false; 
}); 

He utilizado estos enlaces, pero fue en vano para mí.

http://jqueryui.com/demos/dialog/#modal

http://jqueryui.com/demos/dialog/#default

Por favor, hágamelo saber si tienen una ideas, muy apreciados, gracias.

Answer 1

Este código HTML está bien:

<a href="#" id="contactUs">Contact Us</a>     
<div id="dialog" title="Contact form"> 
    <p>appear now</p> 
</div> 

debe inicializar el diálogo (no estoy seguro si está haciendo esto):

$(function() { 
    // this initializes the dialog (and uses some common options that I do) 
    $("#dialog").dialog({ 
    autoOpen : false, modal : true, show : "blind", hide : "blind" 
    }); 

    // next add the onclick handler 
    $("#contactUs").click(function() { 
    $("#dialog").dialog("open"); 
    return false; 
    }); 
}); 

Answer 2

Su problema está en la convocatoria para el diálogo

Si no inicializa el cuadro de diálogo, no tiene que pasar "abrir" para que se muestre:

Además, este código debe estar en una función $(document).ready(); o estar debajo de los elementos para que funcione.

Answer 3

Puede consultar este enlace: http://jqueryui.com/dialog/

Este código debería funcionar bien

$("#dialog").dialog(); 

Answer 4

Es muy sencillo, hay que añadir primero HTML:

<div id="dialog"></div> 

Entonces, debe ser inicializado:

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
    jQuery('#dialog').dialog({ 'autoOpen': false }); 
    }); 
</script> 

Después de esto se puede demostrar por código:

jQuery('#dialog').dialog('open'); 

Answer 5

uso por debajo de Código, funcionó para mí.

<script type="text/javascript"> 
    $(document).ready(function() { 
      $('#dialog').dialog({ 
       autoOpen: false, 
       title: 'Basic Dialog' 
      }); 
      $('#contactUs').click(function() { 
       $('#dialog').dialog('open'); 
      }); 
     }); 
</script> 

Answer 6

Puede usar la siguiente secuencia de comandos. Funcionó para mí

El modal en sí consiste en un contenedor modal principal, un encabezado, un cuerpo y un pie de página. El pie de página contiene las acciones, que en este caso es el botón Aceptar, el encabezado contiene el título y el botón de cerrar, y el cuerpo contiene el contenido modal.

$(function() { 
     modalPosition(); 
     $(window).resize(function() { 
      modalPosition(); 
     }); 
     $('.openModal').click(function (e) { 
      $('.modal, .modal-backdrop').fadeIn('fast'); 
      e.preventDefault(); 
     }); 
     $('.close-modal').click(function (e) { 
      $('.modal, .modal-backdrop').fadeOut('fast'); 
     }); 
    }); 
    function modalPosition() { 
     var width = $('.modal').width(); 
     var pageWidth = $(window).width(); 
     var x = (pageWidth/2) - (width/2); 
     $('.modal').css({ left: x + "px" }); 
    } 

Consulte: - Modal popup using jquery in asp.net