为什么我的Javascript对话框无法正常工作
[英]Why wont my Javascript dialog box work
问题描述
我已经尝试了很长时间才能使该对话框正常工作。 我已经爬过google，并在这里浏览了许多问题。 无论如何，我还是无法使其正常工作。 我正在尝试获得与此类似的结果： http : //example.nemikor.com/basic-usage-of-the-jquery-ui-dialog/
我确实尝试过使用此源代码中的代码，但是我也无法使它正常工作。
这是jQuery：
<script type="text/javascript">
$(document).ready(function(){
// Initialize my dialog
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
"OK":function() { // do something },
"Cancel": function() { $(this).dialog("close"); }
}
});
// Bind to the click event for my button and execute my function
$("#x-button").click(function(){
Foo.DoSomething();
});
});
var Foo = {
DoSomething: function(){
$("#dialog").dialog("open");
}
}
这是HTML：
<div id="column1">
<h2>
Features</h2>
<p>
Click an image below to view more information on our products.</p>
<img src="../Images/lockIcon.png" alt="Security" />
<input id="x-button" type="button" />
<p id="dialog" display="none">This is content!</p>
</div>
我已经尽了一切努力使其正常工作，但是没有实现。 jQuery本身是从答案发布到类似问题的答案，在我自己放弃生命之后，我尝试使用它，如果可以帮助我，我将不胜感激，请注意，我是Java语言/ jQuery，所以请不要对我太烂。
谢谢。
3 个解决方案
解决方案1
1 2011-07-27 10:45:05
您在此行有一个错误，因为行尾注释隐藏了解释器的大括号。
"OK":function() { // do something },
您需要将其删除或用/* do something */代替/* do something */ 。
这对我有用：
<html>
<head>
<link type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Initialize my dialog
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
"OK":function() { },
"Cancel": function() { $(this).dialog("close"); }
}
});
// Bind to the click event for my button and execute my function
$("#x-button").click(function(){
Foo.DoSomething();
});
});
var Foo = {
DoSomething: function(){
$("#dialog").dialog("open");
}
}
</script>
</head>
<body>
<div id="column1">
<h2>Features</h2>
<p>Click an image below to view more information on our products.</p>
<img src="../Images/lockIcon.png" alt="Security" />
<input id="x-button" type="button" />
<p id="dialog" display="none">This is content!</p>
</div>
</body>
</html>
解决方案2
1 已采纳 2011-07-27 10:46:15
右括号在这里注释掉：
"OK":function() { // do something },
您需要注意右括号和大括号。 他们修复了以下问题，它们有更多问题：
<html>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Initialize my dialog
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
"OK":function() {},
"Cancel": function() { $(this).dialog("close"); }
}
}
);
// Bind to the click event for my button and execute my function
$("#x-button").click(function(){
Foo.DoSomething();
});
var Foo = {
DoSomething: function(){
$("#dialog").dialog("open");
}
}
});
</script>
</head>
<body>
<div id="column1">
<h2>
Features</h2>
<p>
Click an image below to view more information on our products.</p>
<img src="../Images/lockIcon.png" alt="Security" />
<input id="x-button" type="button" />
<p id="dialog" display="none">This is content!</p>
</div>
</body>
</html>
解决方案3
-2 2011-07-27 10:38:36
这是解决方案http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/
该页面的节选：
解决此问题的简单方法是，将autoOpen设置为false实例化对话框，然后在事件处理程序中调用.dialog（'open'）。
$('#opener').click(function() {
$dialog.dialog('open');
// prevent the default action, e.g., following a link
return false;
});
为什么我的JavaScript无法在服务器上工作？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.