web-dev-qa-db-fra.com

boîte de dialogue jQuery

Je suis en train de faire une boîte de dialogue avec jQuery. Dans cette boîte de dialogue, je vais avoir des termes et conditions. Le problème est que la boîte de dialogue ne s'affiche que pour la première fois.

Ceci est le code.

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>

Le problème, je pense, est que lorsque vous fermez la boîte de dialogue, la DIV est détruite du code html et ne peut donc plus être affichée à l'écran.

Peux-tu aider s'il te plait!

Merci

javascriptjquerydialog
35
David Bonnici

On dirait qu'il y a un problème avec le code que vous avez posté. Votre fonction pour afficher les conditions d'utilisation référence le mauvais identifiant div. Vous devriez également envisager d'affecter la fonction showTOC à l'attribut onclick une fois le document chargé:

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

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

Un exemple plus concis permettant d'obtenir l'effet souhaité à l'aide de la boîte de dialogue de l'interface utilisateur de 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>
25
carlsz

J'ai rencontré le même problème (la boîte de dialogue ne s'ouvrirait qu'une fois, après s'être fermée, elle ne s'ouvrirait plus) et j'ai essayé les solutions ci-dessus qui ne réglaient pas mon problème. Je suis retourné aux docs et j'ai réalisé que j'avais un malentendu fondamental sur le fonctionnement du dialogue.

La commande $ ('# myDiv'). Dialog () crée/instancie le dialogue, mais n’est pas forcément la bonne façon de open it. La manière appropriée de l'ouvrir consiste à instancier la boîte de dialogue avec dialog (), puis à utiliser la boîte de dialogue ('open') pour l'afficher et la boîte de dialogue ('close') pour le fermer/le masquer. Cela signifie que vous voudrez probablement définir l'option autoOpen sur false.

Le processus est donc le suivant: instanciez la boîte de dialogue sur le document prêt, puis écoutez le clic ou l'action que vous souhaitez afficher. Ensuite, cela fonctionnera, maintes fois!

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

J'avais le même problème et cherchais un moyen de le résoudre qui me conduisait ici. Après avoir examiné la suggestion de RaeLehman, cela m’a amené à la solution. Voici ma mise en œuvre.

Dans mon événement $ (document) .ready, j'initialise ma boîte de dialogue avec le paramètre autoOpen défini sur false. J'ai également choisi de lier un événement de clic à un élément, tel qu'un bouton, pour ouvrir 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 m'assure que la fonction est définie et que j'implémente la méthode open dialog.

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

A propos, j'ai testé cela dans IE7 et Firefox et cela fonctionne bien. J'espère que cela t'aides!

14
Rickster

Si vous devez utiliser plusieurs boîtes de dialogue sur une page et les ouvrir, fermez-les et rouvrez-les: 

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

La solution de RaeLehman fonctionne si vous souhaitez uniquement générer le contenu de la boîte de dialogue une seule fois (ou le modifier uniquement à l'aide de javascript). Si vous souhaitez réellement régénérer le dialogue à chaque fois (par exemple, à l'aide d'une classe de modèle de vue et de Razor), vous pouvez fermer tous les dialogues avec $ (". Ui-dialog-titlebar-close"). Click (); et laissez autoOpen défini sur sa valeur par défaut, true.

1
Daniel
<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>
1
Upali

Ma solution: supprimer certaines options init (ex. Show), car le constructeur ne cède pas si quelque chose ne fonctionne pas (ex: effet de glissement) .

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;
}
0
Michal Wrd

Même j'ai fait face à des problèmes similaires. C’est ainsi que j’ai pu résoudre le même problè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;
    });
0
Vishnoo Rath

Ceci est un peu plus concis et vous permet également d’avoir différentes valeurs de dialogue etc. basées sur différents événements de clic:

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

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

    return false;
});
0
djburdick

si vous voulez changer l'opacité pour tout le dialogue alors changez 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);
}
0
Rikin Patel