web-dev-qa-db-ja.com

ボタンクリック時にカスタムダイアログボックスを表示する方法

ボタンのクリック時にカスタムダイアログボックスをロードしたいのですが、それが発生しません。このWebページのダイアログボックスを使用しています。

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

これが私のコードです。

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


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

上記のコードが機能していません。助けてください...

javascriptjqueryhtmljquery-uijquery-ui-dialog
4
Lucy

正常に動作します prooflink
HTML：

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

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

そしてJquery：

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

    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
5
Roar
function click(){
       $( "#dialog" ).dialog({
        width : 250,
        height: 180,
        modal : true
        });
}
0
Ramu

Jquery-2.1.0.min.jsとjquery.ui-1.10.4を使用しています。

これが私の完全なソースコードです：

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

'on click'関数のコールバック関数にイベントパラメータを渡し、preventDefault（）メソッドを呼び出してください。 event.preventDefault（） についてもっと読むまた、 here はevent.preventDefault（）とreturnfalseの良い読み物です

0
user3418438

セレクターはIDがdialogの要素を見つけようとしていますが、要素がないようです。これを試して：

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