Cómo mostrar cuadro de Diálogo Personalizado en el botón haga clic en

Quiero que mi cuadro de diálogo personalizado para cargar en el botón haga clic en pero eso no sucede.Estoy usando el cuadro de diálogo en esta página web.

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

aquí está mi código..

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


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

El código anterior no funciona..ayuda por Favor…

  • $(function() { alert(«hola»); });
  • (esto asegura que han incluido el jquery js archivo)
  • Verificación de la consola. Está usted recibiendo errores?
  • No, yo no estoy recibiendo ningún error en mi consola.El cuadro de diálogo es llegar cargado en la página de carga en lugar de clic de botón.
InformationsquelleAutor Lucy | 2013-04-24

5 Kommentare

  1. 5

    Funciona bien hay prooflink

    HTML:

    <div id="dialog">
          <p>THIS IS DIALOG!!!</p>
        </div>
    
        <button id="opener">Open Dialog</button>

    Y Jquery:

    $(function() {
        $( "#dialog" ).dialog({
          autoOpen: false
        });
    
        $( "#opener" ).click(function() {
          $( "#dialog" ).dialog( "open" );
        });
      });
    • trató de este trozo de código..cuando la página se carga todo el contenido de id de diálogo se muestran a continuación en el botón como si el cuadro de diálogo nunca fue creado.
    • Mismo problema que estoy enfrentando, ¿resolverlo ?
    • tiene u ligada a ver lo que sucede en la consola?
  2. 0

    El selector está tratando de encontrar un elemento con el id dialog pero parece que usted no tiene uno. Intente esto:

    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>
    • He incluido div con id de diálogo como en el código dado en el hipervínculo anterior, pero aún no funciona.
    • Es posible que desee agregar el código en la document.ready controlador. He editado el anterior.
    • Probado el anterior código editado, pero aún no funciona.El contenido de la etiqueta div es conseguir que aparece debajo del botón sin ningún tipo de estilo css como si el cuadro de diálogo nunca fue creado.
    • Intentar incluyendo el enlace para el archivo CSS de jquery-ui.
  3. 0
    function click(){
           $( "#dialog" ).dialog({
            width : 250,
            height: 180,
            modal : true
            });
    }
  4. 0

    Estoy usando jquery-2.1.0.min.js y jquery.la interfaz de usuario 1.10.4.

    Aquí está mi código fuente completo:

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

    Asegúrese de pasar un evento parámetro a la función de devolución de llamada en tu ‘clic’ de la función y de la llamada al método preventDefault() en ella. Lea más acerca de evento.preventDefault() También, aquí‘s una buena lectura en el evento.preventDefault() vs return false

  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>

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea