•  21-08-2019
  •  | 
  •  

Frage

Im Versuch, ein Dialogfeld mit Jquery zu tun. Im gehenden Bedingungen haben in diesem Dialogfeld. Das Problem ist, dass das Dialogfeld nur zum ersten Mal angezeigt wird.

Dies ist der Code.

JavaScript: 

function showTOC()
{
    $("#TOC").dialog({ 
        modal: true, 
        overlay: { 
            opacity: 0.7, 
            background: "black" 
        } 
    })
}

HTML (a href): 

<a class="TOClink" href="javascript:showTOC();">View Terms & Conditions</a>

<div id="example" title="Terms & Conditions">1..2..</div>

Das Problem, das ich glaube, ist, dass, wenn Sie das Dialogfeld schließen die DIV aus dem HTML-Code zerstörten therfore kann es nie wieder auf dem Bildschirm angezeigt werden.

Können Sie mir bitte helfen!

Danke

War es hilfreich?

Lösung

Sieht aus wie es ein Problem mit dem Code Sie auf dem Laufenden. Ihre Funktion ist die T & C anzuzeigen verweist die falsche div id. Sie sollten die Zuordnung die showtoc Funktion das Onclick-Attribut prüfen, sobald das Dokument als auch geladen wird: 

$(document).ready({
    $('a.TOClink').click(function(){
        showTOC();
    });
});

function showTOC() {
    $('#example').dialog({modal:true});
}

A prägnantes Beispiel, das den gewünschten Effekt unter Verwendung des jQuery UI Dialogs erfüllt ist: 

   <div id="terms" style="display:none;">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </div>
   <a id="showTerms" href="#">Show Terms &amp; Conditions</a>      
   <script type="text/javascript">
       $(document).ready(function(){
           $('#showTerms').click(function(){
               $('#terms').dialog({modal:true});   
           });
       });
   </script>

Andere Tipps

begegnete ich das gleiche Problem (Dialog nur einmal öffnen würde, nach dem Schließen, wäre es nicht wieder öffnen), und versuchte, die Lösungen, über den nicht mein Problem beheben. Ich ging zurück in die Dokumentation und erkennen ich hatte ein grundsätzliches Missverständnis, wie der Dialog funktioniert.

$ ( '# myDiv'). Dialog () Befehl erstellt / den Dialog instanziiert, ist aber nicht unbedingt der richtige Weg, um open es. Der richtige Weg, es zu öffnen, ist der Dialog mit Dialog () zu instanziiert, dann Dialog verwenden ( ‚open‘), um sie anzuzeigen, und dialog ( ‚close‘) / schließen ausblenden. Das heißt, Sie werden wahrscheinlich die Auto-Open-Option auf false gesetzt werden sollen.

So ist der Prozess: instanziiert den Dialog auf dem Dokument bereit, hören dann für den Klick oder was auch immer Sie die gewünschte Option um den Dialog zu zeigen. Dann wird es funktionieren, immer wieder! 

<script type="text/javascript"> 
        jQuery(document).ready( function(){       
            jQuery("#myButton").click( showDialog );

            //variable to reference window
            $myWindow = jQuery('#myDiv');

            //instantiate the dialog
            $myWindow.dialog({ height: 350,
                width: 400,
                modal: true,
                position: 'center',
                autoOpen:false,
                title:'Hello World',
                overlay: { opacity: 0.5, background: 'black'}
                });
            }

        );
    //function to show dialog   
    var showDialog = function() {
        //if the contents have been hidden with css, you need this
        $myWindow.show(); 
        //open the dialog
        $myWindow.dialog("open");
        }

    //function to close dialog, probably called by a button in the dialog
    var closeDialog = function() {
        $myWindow.dialog("close");
    }


</script>
</head>

<body>

<input id="myButton" name="myButton" value="Click Me" type="button" />
<div id="myDiv" style="display:none">
    <p>I am a modal dialog</p>
</div>

Ich hatte das gleiche Problem und war auf der Suche nach einem Weg, um es zu lösen, die mich hierher gebracht. Nach der Überprüfung des von RaeLehman gemacht Vorschlag, es führte mich zu der Lösung. Hier ist meine Umsetzung.

In meinem $ (document) .ready Ereignis I initialisieren mein Dialog mit den Auto-Open auf false gesetzt. Ich wählte auch ein Click-Ereignis zu einem Elemente zu binden, wie eine Schaltfläche, die meinen Dialog geöffnet. 

$(document).ready(function(){

    // Initialize my dialog
    $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
        "OK":function() { // do something },
        "Cancel": function() { $(this).dialog("close"); }
    }
    });

    // Bind to the click event for my button and execute my function
    $("#x-button").click(function(){
        Foo.DoSomething();
    });
});

Als nächstes stelle ich sicher, dass die Funktion definiert ist, und das ist, wo ich den Dialog offen Methode implementieren. 

var Foo = {
    DoSomething: function(){
        $("#dialog").dialog("open");
    }
}

Durch die Art und Weise, Getestet habe ich diese in IE7 und Firefox und es funktioniert gut. Hoffe, das hilft!

Wenn Sie auch mehrere Dialogfelder auf einer Seite und öffnen, schließen und öffnen sie die folgenden Werke verwenden: 

 JS CODE:
    $(".sectionHelp").click(function(){
        $("#dialog_"+$(this).attr('id')).dialog({autoOpen: false});
        $("#dialog_"+$(this).attr('id')).dialog("open");
    });

 HTML: 
    <div class="dialog" id="dialog_help1" title="Dialog Title 1">
        <p>Dialog 1</p>
    </div>
    <div class="dialog" id="dialog_help2" title="Dialog Title 2">
        <p>Dialog 2 </p>
    </div>

    <a href="#" id="help1" class="sectionHelp"></a>
    <a href="#" id="help2" class="sectionHelp"></a>

 CSS:
    div.dialog{
      display:none;
    }

RaeLehman-Lösung funktioniert, wenn Sie nur einmal den Dialog Inhalt erstellt werden soll (oder nur modifizieren es mit Hilfe von Javascript). Wenn Sie tatsächlich den Dialog jedes Mal (zum Beispiel eine Ansicht Modellklasse und Rasierer) regenerieren möchten, dann können Sie alle Dialoge mit $ schließen klicken () ( „ui-Dialog-titlebar-close..“); und Auto-Open-Satz auf den Standardwert true verlassen. 

<script type="text/javascript">
// Increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
    $('#dialog1').dialog({
        autoOpen: false,
        show: 'blind',
        hide: 'explode'
    });

    $('#Wizard1_txtEmailID').click(function() {
        $('#dialog1').dialog('open');
        return false;
    });
    $('#Wizard1_txtEmailID').click(function() {
        $('#dialog2').dialog('close');
        return false;
    });
    //mouseover
    $('#Wizard1_txtPassword').click(function() {
        $('#dialog1').dialog('close');
        return false;
    });

});



/////////////////////////////////////////////////////
 <div id="dialog1" title="Email ID">
                                                                                                                <p>
                                                                                                                    (Enter your Email ID here.)
                                                                                                                    <br />
                                                                                                                </p>
                                                                                             </div>
 ////////////////////////////////////////////////////////

<div id="dialog2" title="Password">
                                                                                                                <p>
                                                                                                                    (Enter your Passowrd here.)
                                                                                                                    <br />
                                                                                                                </p>
                                                                                              </div>

Dies ist ein wenig kürzer und erlaubt Ihnen auch, etc verschiedene Dialog Werte zu haben, basierend auf verschiedenen Klick-Ereignisse: 

$('#click_link').live("click",function() {
    $("#popup").dialog({modal:true, width:500, height:800});

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

    return false;
});

Meine Lösung: Entfernen Sie einige init Optionen, weil Konstruktor tut Ausbeute, wenn etwas nicht (ex Dia-Effekt) arbeiten (ex-Show.). Meine Funktion ohne dynamische HTML-Einfügung: 

function ySearch(){ console.log('ysearch');
    $( "#aaa" ).dialog({autoOpen: true,closeOnEscape: true, dialogClass: "ysearch-dialog",modal: false,height: 510, width:860
    });
    $('#aaa').dialog("open");

    console.log($('#aaa').dialog("isOpen"));
    return false;
}

Auch stand ich ähnliche Probleme. Dies ist, wie ich war in der Lage, das gleiche zu lösen 

    $("#lnkDetails").live('click', function (e) {

        //Create dynamic element after the element that raised the event. In my case a <a id="lnkDetails" href="/Attendance/Details/2012-07-01" />
        $(this).after('<div id=\"dialog-confirm\" />');

        //Optional : Load data from an external URL. The attr('href') is the href of the <a> tag.
        $('#dialog-confirm').load($(this).attr('href'));

        //Copied from jQueryUI site . Do we need this?
        $("#dialog:ui-dialog").dialog("destroy");

        //Transform the dynamic DOM element into a dialog
        $('#dialog-confirm').dialog({
            modal: true,
            title: 'Details'
        });

        //Prevent Bubbling up to other elements.
        return false;
    });

Wenn Sie wollen Opazität ändern für alle Dialog dann in jquery-ui.css ändern 

/* Overlays */
.ui-widget-overlay
{
    background: #5c5c5c url(images/ui-bg_flat_50_5c5c5c_40x100.png) 50% 50% repeat-x;
    opacity: .50;
    filter: Alpha(Opacity=80);
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top