transparente - ventana emergente de diálogo jQuery

ventana modal jquery php mysql

Question

Estoy intentando que aparezca este formulario de diálogo emergente 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 muy frustrante para mí.

Aquí está 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 está en un archivo externo:

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

He usado estos enlaces, pero en vano:

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

Por favor avíseme si tengo alguna idea, muy apreciada, gracias.

Answer 1

Es bastante simple, primer HTML debe ser agregado:

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

Luego, se debe inicializar:

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

Después de esto puedes mostrarlo por código:

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

Answer 2

Este HTML está bien:

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

Debe inicializar el cuadro de diálogo (no está 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 3

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

Este código debería funcionar bien

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

Answer 4

Puede utilizar el siguiente script. Funciono para mi

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 cierre, 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: - Ventana emergente modal utilizando jquery en asp.net

Answer 5

Su problema está en la llamada para el diálogo.

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

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

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

Answer 6

Usa el código debajo, funcionó para mí.

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