•  21-08-2019
  •  | 
  •  

Question

Im essayant de faire une boîte de dialogue avec jquery. Dans cette boîte de dialogue Im va avoir des termes et conditions. Le problème est que la boîte de dialogue ne s'affiche pour la première fois.

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

Le problème que je pense est que lorsque vous fermez la boîte de dialogue de la DIV est détruite à partir du code html therfore il ne peut jamais être affiché à nouveau à l'écran.

Pouvez-vous s'il vous plaît aider!

Merci

Était-ce utile?

La solution

On dirait qu'il ya un problème avec le code affiché. Votre fonction pour afficher le T & C fait référence à l'ID de mauvais div. Vous devriez envisager d'attribuer la fonction de showtoc à l'attribut onclick une fois que le document est chargé ainsi: 

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

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

Un exemple plus concise qui réalise l'effet désiré en utilisant la boîte de dialogue UI jQuery est: 

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

Autres conseils

Je rencontrais la même question (dialogue, il après la fermeture, serait une seule fois pas ouvrir ouvrir à nouveau), et essayé les solutions ci-dessus qui n'a pas résolu mon problème. Je suis retourné à la documentation et réalisé que j'avais une incompréhension fondamentale de la façon dont les travaux de dialogue.

La commande $ ( '# de myDiv') dialogue (). Crée / instancie la boîte de dialogue, mais pas nécessairement la bonne façon de Ouvrir il. La bonne façon de l'ouvrir est d'instancier la boîte de dialogue avec un dialogue (), puis utilisez dialogue ( « ouvert ») pour l'afficher, et le dialogue ( « fermer ») pour fermer / cacher. Cela signifie que vous aurez probablement envie de définir l'option Autoopen false.

Ainsi, le processus est: instancier la boîte de dialogue sur le document prêt, puis écouter le clic ou toute action que vous souhaitez afficher la boîte de dialogue. Ensuite, il fonctionnera, après le temps! 

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

J'ai eu le même problème et je cherchais un moyen de résoudre ce qui m'a amené ici. Après avoir examiné la suggestion de RaeLehman il m'a conduit à la solution. Voici ma mise en œuvre.

Dans mon $ (document) de l'événement .ready j'initialiser mon dialogue avec le Autoopen à false. J'ai choisi aussi de lier un événement de clic à un élément, comme un bouton, qui ouvrira ses portes ma boîte de dialogue. 

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

Ensuite, je fais en sorte que la fonction est définie et qui est où je mets en œuvre la méthode ouverte de dialogue. 

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

Par ailleurs, je l'ai testé cela dans IE7 et Firefox, et il fonctionne très bien. Espérons que cela aide!

Si vous avez besoin d'utiliser plusieurs boîtes de dialogue sur une page et ouvrir, fermer et les rouvrir les travaux suivants ainsi: 

 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 solution de RaeLehman fonctionne si vous ne voulez générer une fois que le contenu de la boîte de dialogue (ou seulement le modifier en utilisant javascript). Si vous voulez vraiment régénérer la boîte de dialogue à chaque fois (par exemple, en utilisant une classe de modèle de vue et Razor), vous pouvez fermer toutes les boîtes de dialogue avec $ cliquez sur () ( « ui-dialogue-titlebar-près. »). et laisser ensemble Autoopen à sa valeur par défaut 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>

Ceci est un peu plus concis et vous permet également d'avoir des valeurs de dialogue, etc. en fonction des différents événements de clic: 

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

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

    return false;
});

Ma solution: supprimer certaines options d'initialisation, car le constructeur ne marche pas si le rendement quelque chose ne fonctionne (ex effet de diapositives) (ex.) Montrent. Ma fonction sans insertion html dynamique: 

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

Même je faisais face à des problèmes similaires. Voilà comment j'ai pu résoudre le même 

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

Si vous voulez changer l'opacité pour tous les dialogue changent alors en 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);
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top