popup di jquery popup

Question

Sto cercando di ottenere questo modulo popup di dialogo da mostrare quando si fa clic su questo collegamento ma non funziona per me. Ci sto lavorando da tre ore e questo è troppo frustrante per me.

Ecco il mio html

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

Ed ecco il mio javascript, questo è in un file esterno.

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

Ho usato questi collegamenti, ma senza alcun risultato per me.

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

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

Per favore fatemi sapere se abbia un idee, molto apprezzato, grazie.

Answer 1

Questa HTML va bene:

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

è necessario inizializzare la finestra di dialogo (non so se si sta facendo questo):

$(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

Il tuo problema è la chiamata per la finestra di

Se non si inizializza la finestra di dialogo, non è necessario passare "open" perché possa essere visualizzato:

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

Inoltre, questo codice deve essere su una funzione $(document).ready(); o essere sotto gli elementi per farlo funzionare.

Answer 3

È possibile controllare questo link: http://jqueryui.com/dialog/

Questo codice dovrebbe funzionare bene

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

Answer 4

E 'molto semplice, prima HTML deve essere aggiunto:

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

Poi, deve essere inizializzato:

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

Dopo questo si può mostrare per codice:

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

Answer 5

Usa sotto Codice, ha funzionato per me.

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

Answer 6

È possibile utilizzare il seguente script. Ha funzionato per me

La modale stessa è costituita da un contenitore modale principale, un'intestazione, un corpo e un piè di pagina. Il piè di pagina contiene le azioni, che in questo caso è il pulsante OK, l'intestazione contiene il titolo e il pulsante di chiusura e il corpo contiene il contenuto modale.

$(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" }); 
    } 

fare riferimento: - Modal popup using jquery in asp.net