jQuery finestra di dialogo

StackOverflow https://stackoverflow.com/questions/366696

  •  21-08-2019
  •  | 
  •  

Domanda

Nel tentativo di fare una finestra di dialogo con jQuery. In questa finestra di dialogo Im andando ad avere termini e condizioni. Il problema è che la finestra di dialogo viene visualizzata solo per la prima volta.

Questo è il codice.

JavaScript: 

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

HTML (un href): 

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

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

Il problema che penso è che quando si chiude la finestra di dialogo DIV viene distrutto dal codice html therfore non può mai essere nuovamente visualizzata sullo schermo.

Potete per favore aiutare!

Grazie

È stato utile?

Soluzione

Sembra che c'è un problema con il codice che avete inviato. La funzione per visualizzare la T & C fa riferimento il torto div id. Si dovrebbe prendere in considerazione l'assegnazione della funzione showTOC all'attributo onclick una volta che il documento sia caricato così: 

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

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

Un esempio più concisa, che compie l'effetto desiderato utilizzando la finestra di jQuery UI è: 

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

Altri suggerimenti

Ho incontrato lo stesso problema (dialogo avrebbe aperto solo una volta, dopo la chiusura, non avrebbe aperto di nuovo), e ha cercato le soluzioni di sopra del quale non risolvere il mio problema. Sono tornato alla documentazione e realizzato ho avuto una fondamentale incomprensione di come funziona il dialogo.

comando

Il $ ( '# myDiv'). finestra di dialogo () crea / un'istanza della finestra di dialogo, ma non è necessariamente il modo corretto di Apri di esso. Il modo corretto per aprirlo è quello di istanziare il dialogo con finestra di dialogo (), quindi utilizzare di dialogo ( 'aperto') per visualizzarla e dialogo ( 'vicino') per chiudere / nasconderlo. Questo significa che probabilmente si vorrà impostare l'opzione AutoOpen false.

Così il processo è: istanziare la finestra sul documento pronto, poi ascoltare per lo scatto o quello che volete per visualizzare la finestra di azione. Allora funzionerà, di volta in volta! 

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

Ho avuto lo stesso problema e stavo cercando un modo per risolverlo, che mi ha portato qui. Dopo aver esaminato il suggerimento formulato da RaeLehman che mi ha portato alla soluzione. Ecco la mia implementazione.

Nel mio $ (document) evento .ready ho inizializzare il mio dialogo con l'AutoOpen impostato su false. Ho anche scelto di associare un evento click per un elemento, come un bottone, che aprirà la mia finestra. 

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

Successivamente, ho assicurarsi che la funzione è definita ed è qui che a implementare il metodo aperto di dialogo. 

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

A proposito, ho provato questo in IE7 e Firefox e funziona benissimo. Spero che questo aiuta!

Se è necessario utilizzare più finestre di dialogo in una pagina e aprire, chiudere e riaprire le loro seguenti funziona bene: 

 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;
    }

La soluzione di RaeLehman funziona se desideri solo per generare il contenuto della finestra di dialogo una volta (o solo modificarlo utilizzando JavaScript). Se si vuole realmente rigenerare la finestra di dialogo ogni volta (per esempio, utilizzando una classe vista del modello e Razor), allora si può chiudere tutti i dialoghi con $ cliccare () ( "ui-dialogo-barra del titolo-vicino.."); e lasciare AutoOpen insieme al suo valore predefinito true. 

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

Questo è un po 'più conciso e permette anche di avere diversi valori di dialogo, ecc in base a diversi eventi click: 

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

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

    return false;
});

La mia soluzione: rimuovere alcune opzioni init, perché resa costruttore doesnt se qualcosa non funziona (efficacia ex scivolo) (ex spettacolo.). La mia funzione senza l'inserimento html dinamica: 

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;
}

Anche ho dovuto affrontare problemi simili. Questo è il modo sono stato in grado di risolvere lo stesso 

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

Se si desidera modificare l'opacità di tutti finestra quindi modificare in jquery-ui.css 

/* 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);
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top