如何在按鈕單擊時顯示自定義對話框

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

選擇器正在嘗試使用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>

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（）的更多信息另外，這里有關於event.preventDefault（）與return 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 個解決方案

解決方案1
5 2013-04-24 15:47:53

解決方案2
0 2013-04-24 15:49:10

解決方案3
0 2014-01-20 05:47:20

解決方案4
0 2014-03-14 06:11:22

解決方案5
-1 2017-09-01 08:10:02

如何在按鈕單擊時顯示自定義對話框

問題描述

5 個解決方案

解決方案1 5 2013-04-24 15:47:53

解決方案2 0 2013-04-24 15:49:10

解決方案3 0 2014-01-20 05:47:20

解決方案4 0 2014-03-14 06:11:22

解決方案5 -1 2017-09-01 08:10:02

解決方案1
5 2013-04-24 15:47:53

解決方案2
0 2013-04-24 15:49:10

解決方案3
0 2014-01-20 05:47:20

解決方案4
0 2014-03-14 06:11:22

解決方案5
-1 2017-09-01 08:10:02