Comment faire pour afficher la boîte de Dialogue Personnalisée, cliquez sur le bouton

Je veux que mon boîte de dialogue personnalisée pour charger sur le bouton cliquer, mais qui n'est pas le cas.Je suis l'aide de la boîte de dialogue sur cette page web.

http://jqueryui.com/dialog/#default

voici mon code..

      function click(){
      $(function() {
           $( "#dialog" ).dialog({
            width : 250,
            height: 180,
            modal : true
            });
            });
           }


     <div>
    <button type="button" id="put" onclick="click()">Insert data</button>
     </div>

Le code ci-dessus ne fonctionne pas..s'il vous Plaît aider...

  • $(function() { alert("bonjour"); });
  • (cela permet de s'assurer que vous avez inclus le jquery, js fichiers)
  • Vérifiez votre console. Avez-vous des erreurs?
  • Non, je ne reçois pas toutes les erreurs sur ma console.La boîte de dialogue devient chargé au chargement de la page, au lieu de clic sur le bouton.
InformationsquelleAutor Lucy | 2013-04-24
  1. 5

    Il fonctionne très bien il est prooflink

    HTML:

    <div id="dialog">
      <p>THIS IS DIALOG!!!</p>
    </div>

    <button id="opener">Open Dialog</button>

    Et Jquery:

    $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false
    });

    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
    • essayé ce bout de code..lorsque la page est chargée de la totalité du contenu de id zone de dialogue s'affiche sous le bouton, comme si la boîte de dialogue n'a jamais été créé.
    • Même problème, je suis confronté, avez-vous le résoudre ?
    • ont u liés à voir ce qui se passe dans la console?
    InformationsquelleAutor Roar
  2. 0

    Le sélecteur est en essayant de trouver un élément avec l'id dialog mais il semble que vous n'en avez pas. Essayez ceci:

    Javascript:

    $(document).ready(function ()
{
    function click()
    {
        $('#dialog').dialog({
            autoOpen: false,
            width: 250,
            height: 180,
            modal : true
        });
    }
});

    HTML:

     <div id="dialog">
       Your dialog message.
    </div>

    <button type="button" id="put" onclick="click()">Insert data</button>
    • J'ai inclus le div avec l'id de dialogue, tout comme dans le code donné dans le lien hypertexte ci-dessus, mais ça ne marche toujours pas.
    • Vous pouvez ajouter le code dans le document.ready gestionnaire. J'ai édité le ci-dessus.
    • Essayé ci-dessus, édité code mais ça ne marche toujours pas.Le contenu de la div est arriver affiché sous le bouton sans le style css comme si la boîte de dialogue n'a jamais été créé.
    • Essayez d'inclure le lien vers le fichier CSS de jquery ui.
    InformationsquelleAutor chead23
  3. 0
    function click(){
       $( "#dialog" ).dialog({
        width : 250,
        height: 180,
        modal : true
        });
}
    InformationsquelleAutor Ramu
  4. 0

    Je suis en utilisant jquery-2.1.0.min.js et jquery.ui-1.10.4.

    Voici mon code source:

    (For the jquery-ui.css link tag, change: href="path_to_your_jquery-ui/themes/base/jquery-ui.css")
(For the jquery script tag, change: src="path_to_your_jquery/jquery-2.1.0.min.js")
(For the jquery-ui script tag, change: src="path_to_your_jquery-ui/ui/jquery-ui.js")
(For your demos.css link tag, change: href="path_to_your_jquery-ui/demos/demos.css")
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="add-ons/jui/themes/base/jquery-ui.css"/>
<script src="add-ons/jquery-2.1.0.min.js"></script>
<script src="add-ons/jui/ui/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="add-ons/jui/demos/demos.css"/>
<!-- this in-file styling is used to hide the #dialog element initially -->
<style>
#dialog {
display: none;
}
</style>
<script> 
$(document).ready(function() {
$("#put").on("click", function(evnt) {
$(function() {
$("#dialog").dialog({
width:250,
height: 180,
modal:true
});
});
evnt.preventDefault();
});        
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>
This is the default dialog which is useful for displaying information. 
The dialog window can be moved, resized and closed with the 'x' icon.
</p>
</div>
<div>
<button type="button" id="put">Insert data</button>
</div>
</body>
</html>

    Être sûr de passer un paramètre d'événement à votre fonction de rappel dans votre 'sur clic' de la fonction et l'appel de la méthode preventDefault() sur elle. Lire plus à propos de de l'événement.preventDefault() Aussi, ici's une bonne lecture sur l'événement.preventDefault() vs return false

    InformationsquelleAutor user3418438
  5. -1
    <html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 40%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.button11
{
background: #47bb7c;
border-radius: 2px;
border-bottom: solid 2px #489368;
border-left: 0 none;
border-right: 0 none;
border-top: 0 none;
padding: 4px 8px;
color: #fff;
font-size: 13px;
}
</style>
</head>
<body>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<center>
<p>Green Card</p>
<input type="button" class="button11" name="submit" id="submit" value="Print"/>
<center>
</div>
</div>
<script>
//Get the modal
var modal = document.getElementById('myModal');
//Get the button that opens the modal
var btn = document.getElementById("myBtn");
//Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
//When the user clicks the button, open the modal 
btn.onclick = function() {
modal.style.display = "block";
}
//When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
//When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
    InformationsquelleAutor user8547045