wake-up-neo.com

jQuery-Dialogfenster

Ich versuche, dieses Popup-Popup-Formular anzuzeigen, wenn dieser Link angeklickt wird, aber es funktioniert nicht für mich. Ich habe die letzten drei Stunden daran gearbeitet, und das ist für mich zu frustrierend. 

Hier ist mein HTML:

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

Und hier ist mein JavaScript, das sich in einer externen Datei befindet: 

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

Ich habe diese Links benutzt, aber ohne Erfolg:

Bitte lassen Sie mich wissen, wenn Sie Ideen haben. Vielen Dank. 

20
rj2700

Dieses HTML ist gut:

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

Sie müssen den Dialog initialisieren (nicht sicher, ob Sie dies tun):

$(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;
  });
});
40
Andy Jones

Ihr Problem ist beim Aufruf für den Dialog

Wenn Sie den Dialog nicht initialisieren, müssen Sie nicht "open" übergeben, damit er angezeigt wird:

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

Dieser Code muss sich auch auf einer $(document).ready();-Funktion befinden oder unter den Elementen sein, damit er funktioniert.

7
rcdmk

Verwenden Sie unter Code, es hat für mich funktioniert.

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

Es ist ziemlich einfach, zuerst muss HTML hinzugefügt werden:

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

Dann muss es initialisiert werden:

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

Danach können Sie es per Code anzeigen:

jQuery( '#dialog' ).dialog( 'open' );
3
Michael Martin

Sie können das folgende Skript verwenden. Es hat für mich funktioniert

Das Modal selbst besteht aus einem Hauptmodalcontainer, einem Header, einem Body und einer Fußzeile. Die Fußzeile enthält die Aktionen, in diesem Fall die Schaltfläche OK, die Kopfzeile enthält den Titel und die Schaltfläche Schließen und der Textkörper enthält den modalen Inhalt.

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

Siehe: - Modal Popup mit jquery in asp.net

1
Rameshbl

Sie können diesen Link überprüfen: http://jqueryui.com/dialog/

Dieser Code sollte gut funktionieren

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