jQuery Boîte de Dialogue

Question

jQuery Boîte de Dialogue

Demandé el 14 de Décembre, 2008: Quand la question a-t-elle été
142003 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la 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.

C'est 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 je pense est que lorsque vous fermez la boîte de dialogue de la DIV est détruit du code html donc il ne peut jamais être de nouveau affiché à l'écran.

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

Merci

Demandé el 14 de Décembre, 2008 par David Bonnici

Answer 1

5 Réponses

Answer 2

65voto

RaeLehman Points 919

J'ai rencontré le même problème (dialogue ouvert qu'une fois, après la fermeture, il ne serait pas ouvrir de nouveau), et j'ai 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 la boîte de dialogue.

Le $('#myDiv').la boîte de dialogue() commande crée/instancie la boîte de dialogue, mais n'est pas nécessairement la bonne façon de l'ouvrir il. La bonne façon d'ouvrir c'est pour instancier la boîte de dialogue boîte de dialogue(), puis utilisez la boîte de dialogue ("ouvert") pour l'afficher et de dialogue (fermer) pour fermer/cacher. Cela signifie que vous aurez probablement souhaitez définir la autoOpen option à false.

Ainsi, le processus est: instanciation de la boîte de dialogue sur le document prêt, puis de les écouter pour la cliquez ou toute action que vous voulez afficher la boîte de dialogue. Ensuite, il sera, à chaque 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>

Répondu el 6 de Janvier, 2009 par RaeLehman (919 Points )

Answer 3

25voto

carlsz Points 719

Regarde comme il y a un problème avec le code que vous avez posté. Votre fonction d'affichage de la T&C fait référence à la mauvaise div id. Vous devriez envisager de confier la showTOC fonction de l'attribut onclick une fois que le document est chargé ainsi:

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

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

Plus concis exemple qui accomplit l'effet désiré à l'aide de l'INTERFACE utilisateur de jQuery boîte de dialogue:

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

Répondu el 14 de Décembre, 2008 par carlsz (719 Points )

Answer 4

15voto

Rickster Points 163

J'ai eu le même problème et était à la recherche d'un moyen de résoudre ce qui m'a amené ici. Après examen de la proposition de RaeLehman il m'a conduit à la solution. Voici ma mise en œuvre.

Dans mon $(document).prêt événement j'initialise mon dialogue avec le autoOpen définie sur false. J'ai aussi choisi de lier un événement de clic sur un élément, comme un bouton qui ouvre la 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, j'ai assurez-vous que la fonction est définie et c'est là que j'mettre en œuvre la boîte de dialogue ouvrir méthode.

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

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

Répondu el 27 de Mai, 2009 par Rickster (163 Points )

Answer 5

2voto

Jon Points 1176

Si vous avez besoin d'utiliser plusieurs boîtes de dialogue sur une page et d'ouvrir, de fermer et de rouvrir le suivant fonctionne bien:

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

Répondu el 14 de Janvier, 2010 par Jon (1176 Points )

Answer 6

1voto

Upali Points 11

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

Répondu el 2 de Avril, 2010 par Upali (11 Points )

jQuery Boîte de Dialogue

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

jQuery Boîte de Dialogue

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: