4

我希望我的自定义对话框在按钮单击时加载，但这没有发生。我正在使用此网页上的对话框。

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>

上面的代码不起作用..请帮助...

4

5 回答 5

6

它工作正常有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" );
    });
  });
于 2013-04-24T15:47:53.807 回答
0

我正在使用 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>

确保在“点击”函数中将事件参数传递给回调函数，并在其上调用 preventDefault() 方法。阅读有关event.preventDefault()的更多信息此外，这里有一个很好的阅读 event.preventDefault() 与 return false

于 2014-03-14T06:11:22.760 回答
0 
function click(){
       $( "#dialog" ).dialog({
        width : 250,
        height: 180,
        modal : true
        });
}
于 2014-01-20T05:47:20.570 回答
0

选择器正在尝试查找具有 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>
于 2013-04-24T15:49:10.650 回答
-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>
于 2017-09-01T08:10:02.373 回答