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

我希望我的自定義對話框可以在按鈕上單擊加載，但這不會發生。我正在使用此網頁上的對話框。如何在按鈕上單擊顯示自定義對話框

這裏是我的代碼..

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


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

上面的代碼不working..Please幫助...

來源

2013-04-24 Lucy

$（函數（）{ 警報（「你好」）; }）; – P6345uk 2013-04-24 15:52:29

（這確保你已經包含了jquery js文件） – P6345uk 2013-04-24 15:52:56

檢查你的控制檯。你有錯誤嗎？ – Dom 2013-04-24 18:37:06

它工作正常，有prooflink
HTML：

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

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

And Jqu ery：

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

    $("#opener").click(function() { 
     $("#dialog").dialog("open"); 
    }); 
    });

來源

2013-04-24 15:47:53 Roar

嘗試了這段代碼..當頁面加載時，id對話框的所有內容都顯示在按鈕下面，就好像該對話框從未創建過一樣。 – Lucy 2013-04-24 17:17:59

@Lucy同樣的問題，我面臨着，你解決了嗎？ – Waqas 2014-11-10 16:26:27

@Lucy讓你知道控制檯發生了什麼？ – Roar 2014-12-12 21:20:11

選擇器試圖找到一個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-24 15:49:10 chead23

我已經包含與id對話框中的div，就像上面的超鏈接中給出的代碼一樣，但它仍然不起作用。 – Lucy 2013-04-24 17:15:53

您可能想要將代碼添加到'document.ready'處理程序中。我已編輯上述內容。 – chead23 2013-04-24 21:42:58

嘗試了上述編輯的代碼，但它仍然無法正常工作。div的內容顯示在按鈕下面，沒有任何css樣式，就好像對話框從未創建過一樣。 – Lucy 2013-04-25 03:25:31

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

來源

2014-01-20 05:47:20 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>

請務必事件參數傳遞給你的回調函數在您的「在點擊」功能，調用preventDefault（）方法就可以了。瞭解更多關於event.preventDefault()此外，here的上event.preventDefault（一個良好的閱讀）與返回false

來源

2014-03-14 06:11:22 user3418438

-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-01 08:10:02 user8547045

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

回答

相關問題