Javascript 不能同时显示多个弹出窗口
我想同时显示4个弹出窗口，单击相应的图像按钮后显示4个不同的flash幻灯片 我使用Javascript 不能同时显示多个弹出窗口,javascript,jquery,html,css,asp.net,Javascript,Jquery,Html,Css,Asp.net,我想同时显示4个弹出窗口，单击相应的图像按钮后显示4个不同的flash幻灯片 我使用JavaScript创建弹出窗口，但无法完成图像按钮的其余部分。当我点击按钮时，随机播放flash幻灯片 请参阅以下代码：- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="ht
JavaScript<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="ddmenu/ddmenu.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico"/>
<script src="ddmenu/ddmenu.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$("[id*=a]").live("click", function () {
$("#dialog26").dialog({
title: "DMD Officers",
height: 700,
width: 1000,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
<script type="text/javascript">
$("[id*=b]").live("click", function () {
$("#dialog27").dialog({
title: "Outsourced Photographs",
height: 700,
width: 1000,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
<script type="text/javascript">
$("[id*=c]").live("click", function () {
$("#dialog28").dialog({
title: "DMD Dog Squad",
height: 700,
width: 1000,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
<script type="text/javascript">
$("[id*=d]").live("click", function () {
$("#dialog29").dialog({
title: "Snake awareness campaign",
height: 700,
width: 1000,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td colspan="3" class="auto-style9">
<nav id="ddmenu">
<ul>
<li><a href="Home.aspx" target="_blank">Home</a></li>
<li><a href="http://www.ril.com/OurBusinesses/Global-Corporate-Security/Security-Services.aspx" target="_blank">About Us</a></li>
</ul>
</nav>
</td>
</tr>
<tr>
<td style="border-style: solid; border-color: #996600;">
<asp:imagebutton id="a" runat="server" height="200px" imageurl="~/Images/officer.jpg" width="200px" />
<div id="dialog26" style="display: none;">
<embed src="Videos/DMD Officers final.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600;">
<asp:imagebutton id="b" runat="server" height="200px" imageurl="~/Images/outphoto.jpg" width="200px" />
<div id="dialog27" style="display: none;">
<embed src="Videos/Outsourced photographs.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600; text-align: center;">
<asp:imagebutton id="c" runat="server" height="200px" imageurl="~/Images/Dog.jpg" width="200px" />
<div id="dialog28" style="display: none;">
<embed src="Videos/DMD Dog Squad 1.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600; text-align: center;">
<asp:imagebutton id="d" runat="server" height="200px" imageurl="~/Images/SankeAwa.jpg" width="200px" />
<div id="dialog29" style="display: none;">
<embed src="Videos/Snake awareness campaign.swf" height="1000px" width="1000px" />
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
$（“[id*=a]”。live（“单击”，函数（）{
$（“#dialog26”）.dialog({
标题：“DMD官员”，
身高：700，
宽度：1000，
按钮：{
关闭：函数（）{
$（this.dialog（'close'）；
}
}
});
返回false；
});
$（“[id*=b]”。实时（“单击”，函数（）{
$（“#对话框27”）。对话框({
标题：“外包照片”，
身高：700，
宽度：1000，
按钮：{
关闭：函数（）{
$（this.dialog（'close'）；
}
}
});
返回false；
});
$（“[id*=c]”。live（“单击”，函数（）{
$（“#dialog28”）.dialog({
标题：“DMD狗队”，
身高：700，
宽度：1000，
按钮：{
关闭：函数（）{
$（this.dialog（'close'）；
}
}
});
返回false；
});
$（“[id*=d]”。live（“单击”，函数（）{
$（“#dialog29”）.dialog({
标题：“蛇意识运动”，
身高：700，
宽度：1000，
按钮：{
关闭：函数（）{
$（this.dialog（'close'）；
}
}
});
返回false；
});
$（“[id*=btnPopup]”）是指捕获包含btnPopup的所有按钮！，由于名称（btnpoppup2、btnpoppup3、btnpoppup4）的原因，rest按钮包含了这些内容，因此您可以使用相同的（第一个）代码捕获所有内容，并且您按下的任何按钮都只会触发第一个
因此，如果您希望按原样使用此代码并使其正常工作，请将第一个按钮重命名为btnPopup0
参考：
但我看到更多的虫子
在这一行中，$（“#dialog”）.dialog({
存在于每次调用中，仍然是调用页面的同一部分以使其成为对话框，但我看到其他部分都有名称，如dialog1，dialog2等。因此这也是您必须解决的问题。您的代码中有很多错误！！！。让我逐一指出
1.$（“[id*=a]”）。live（“单击”
：其他3个部分中存在类似的代码。不要使用live绑定事件。它已弃用，并且出于充分理由弃用。摘自文档
从jQuery 1.7开始，.live（）方法已被弃用。请使用.on（）附加事件处理程序。较旧版本的jQuery用户应优先使用.delegate（），而不是.live（）
另外，在您的场景中，不需要[id*=a]
。只需id=a
就足够了
2.$（“#对话框”）。对话框({
：您在其他3个部分中也有相同的代码。您将事件绑定到相同的id。这是一个大问题
。不要使用相同id的id在整个DOM中必须是唯一的。。您可以使用类。只需将相同的类名放入所有div，然后使用类名绑定事件。
-当您使用ids
Jquery绑定事件时，将在DOM中找到具有该id的第一个元素（从顶部读取），并将事件绑定到该元素上
您多次重复相同的脚本逻辑，使其成为通用的
。因此，清理HTML和脚本，下面是您实际需要的
HTML
- 在文档准备就绪时，使用class
dialog
- 只需使用类选择器
.imageDialog
- 向上跟踪父td，然后向下跟踪以找到类名为“dialog”的div并打开它
可能会让您的问题更清楚，您的程序的哪个部分失败了，您需要帮助的部分。您也可以放置一个JSFIDLE来演示问题，不要使用LIVE
进行绑定事件。改为使用on
进行绑定。我已经遵循了您的代码，但是当我单击图像按钮弹出窗口时，当我将on
更改为live
，但当我第二次单击同一图像按钮时，弹出窗口不会出现。@JayDesai如果你说live正在工作而不是打开，那意味着你在加载HTML之前加载脚本。你没有在文档准备就绪时加载脚本。我已经更新了我的答案以运行脚本文件区域
<tr>
<td style="border-style: solid; border-color: #996600;">
<asp:imagebutton id="a" class="imageDialog" runat="server" height="200px" imageurl="~/Images/officer.jpg" width="200px" />
<div class="dialog" data-dialog-title="DMD Officers" style="display: none;">
<embed src="Videos/DMD Officers final.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600;">
<asp:imagebutton id="b" class="imageDialog" runat="server" height="200px" imageurl="~/Images/outphoto.jpg" width="200px" />
<div class="dialog" data-dialog-title="Outsourced photographs" style="display: none;">
<embed src="Videos/Outsourced photographs.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600; text-align: center;">
<asp:imagebutton id="c" class="imageDialog" runat="server" height="200px" imageurl="~/Images/Dog.jpg" width="200px" />
<div class="dialog" data-dialog-title="DMD Dog Squad" style="display: none;">
<embed src="Videos/DMD Dog Squad 1.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600; text-align: center;">
<asp:imagebutton id="d" class="imageDialog" runat="server" height="200px" imageurl="~/Images/SankeAwa.jpg" width="200px" />
<div class="dialog" data-dialog-title="Snake awareness campaign" style="display: none;">
<embed src="Videos/Snake awareness campaign.swf" height="1000px" width="1000px" />
</div>
</td>
</tr>
<script type="text/javascript">
$(function(){
$.each('.dialog',function(){ //loop all the div's and apply plugin for all of them
$(this).dialog({
title: $(this).data('dialog-title'), //extract the title here.
height: 700,
width: 1000,
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
});
$(".imageDialog").on("click", function() {
$(this).closest('td').find(".dialog").dialog( "open" ); //this is how you open the dialog, taken from the plugin site.
});
});
</script>