Question

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

这是我的代码..

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


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

以上代码无效......请帮忙......

Answer 1

它有效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" );
    });
  });

Answer 2

选择器正在尝试查找标识为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>

Answer 3

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

Answer 4

我使用的是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()的更多信息此外，here是关于event.preventDefault（）与返回false的良好读取

Answer 5

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

如何在按钮单击时显示自定义对话框

5 个答案: