jQuery 如何在按钮单击时显示自定义对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16196376/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display Custom Dialog box on button click
提问by Lucy
I want my custom dialog box to load on button click but that's not happening.I am using the dialog box on this webpage.
我希望我的自定义对话框在单击按钮时加载，但这没有发生。我正在使用此网页上的对话框。
http://jqueryui.com/dialog/#default
http://jqueryui.com/dialog/#default
here is my code..
这是我的代码..
function click(){
$(function() {
$( "#dialog" ).dialog({
width : 250,
height: 180,
modal : true
});
});
}
<div>
<button type="button" id="put" onclick="click()">Insert data</button>
</div>
The above code is not working..Please help...
上面的代码不起作用..请帮忙...
回答by Roar
It works fine there is prooflink
HTML:
它工作正常，有prooflink
HTML：
<div id="dialog">
<p>THIS IS DIALOG!!!</p>
</div>
<button id="opener">Open Dialog</button>
And Jquery:
和jQuery：
$(function() {
$( "#dialog" ).dialog({
autoOpen: false
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
回答by chead23
The selector is trying to find an element with the id dialogbut it looks like you don't have one. Try this:
选择器正在尝试查找具有 id 的元素，dialog但您似乎没有。尝试这个：
Javascript:
Javascript：
$(document).ready(function ()
{
function click()
{
$('#dialog').dialog({
autoOpen: false,
width: 250,
height: 180,
modal : true
});
}
});
HTML:
HTML：
<div id="dialog">
Your dialog message.
</div>
<button type="button" id="put" onclick="click()">Insert data</button>
回答by Ramu
function click(){
$( "#dialog" ).dialog({
width : 250,
height: 180,
modal : true
});
}
回答by user3418438
I am using jquery-2.1.0.min.js and jquery.ui-1.10.4.
我正在使用 jquery-2.1.0.min.js 和 jquery.ui-1.10.4。
Here is my full source code:
这是我的完整源代码：
(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>
Be sure to pass an event parameter to your callback function in your 'on click' function and call the preventDefault() method on it. Read more about event.preventDefault()Also, here's an good read on event.preventDefault() vs. return false
确保在“点击”函数中将事件参数传递给回调函数，并在其上调用 preventDefault() 方法。阅读有关event.preventDefault() 的更多信息另外，这里有关于 event.preventDefault() 与 return false 的很好的阅读
回答by user8547045
<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">×</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>
