关于弹出窗dialog 问题
0
悬赏园豆：10
[已关闭问题]
关闭于 2012-06-05 11:09
我在mvc3.0里面做了两个弹出窗 方法如下代码
dialog1弹出代码：
@{ ViewBag.Title = "DialogDetail"; } <h2>DialogDetail</h2> <style type="text/css"> .ButtonLink { color:Blue; cursor:pointer; } .ButtonLink:hover { text-decoration:underline; } .Hidden { display:none; } .ui-icon{ width:0px !important;} .ui-dialog{padding:0px !important;} .ui-dialog-titlebar-close{ width:0px !important; height:0px !important;} .ui-icon1 {background-image:url("../../Content/images/email_icon.png")!important; float:right !important;} .ui-iconleft{background-image:url("../../Content/images/left_arrow.png")!important; float:right !important;} .ui-iconright{background-image:url("../../Content/images/right_arrow.png")!important; float:right !important;} .ui-iconclose{background-image:url("../../Content/images/closeIcon.png")!important; float:right !important;} .ui-widget-header{ background-image:url("../../Content/images/bg_homepage_permission.png")!important; color:#FFFFFF !important; } .ui-state-default { border-width:0px !important; } .ui-icon-minus{background-position-x:-888px !important; background-position-y:-128px !important;} </style> <link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script> <script src="../../Scripts/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function ($) { $("#dialogdetail").dialog({ autoOpen: false, width: 730, height: 630, modal: true, resizable: false }); $(".email").click(function () { $("#dialogdetail").dialog("open"); }); $(".email").click(function () { $("#dialogdetail").html("") .dialog("option", "title","control detail - Malaysia - GL-C05") .load("Detailview", function () { $("#dialogdetail").dialog("open"); }); }); $('<a href="#" class="ui-titlebar-other ui-corner-all ui-state-default"></a>') .append('<span class="ui-icon ui-icon-minus"></span>') .appendTo('.ui-dialog-titlebar').addClass("ui-iconclose") .css({ width: "20px", height: "20px", margin: "0px -10px 0px 0px" }) .click(function () { $("#dialogdetail").dialog("close"); }); $('<a href="#" class="ui-titlebar-other ui-corner-all ui-state-default"></a>') .append('<span class="ui-icon ui-icon-minus"></span>') .appendTo('.ui-dialog-titlebar').addClass("ui-icon1") .css({ width: "30px", height: "20px", margin: "0px 50px 0px 0px" }) .click(function () { alert("sdgsdhge"); }); $('<a href="#" class="ui-titlebar-other ui-corner-all ui-state-default"></a>') .append('<span class="ui-icon ui-icon-minus"></span>') .appendTo('.ui-dialog-titlebar').addClass("ui-iconright") .css({ width: "20px", height: "20px", margin: "0px 40px 0px 0px" }) .click(function () { alert("sdgsdhge"); }); $('<a href="#" class="ui-titlebar-other ui-corner-all ui-state-default"></a>') .append('<span class="ui-icon ui-icon-minus"></span>') .appendTo('.ui-dialog-titlebar').addClass("ui-iconleft") .css({ width: "20px", height: "20px", margin: "0px 5px 0px 0px" }) .click(function () { alert("sdgsdhge"); }); }); </script> <span class="email ButtonLink">Click Me to open Dialog</span> <div id="dialogdetail" title="" class="Hidden"></div>
dialog2代码如下：
@{ ViewBag.Title = "Detailview"; } <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery-ui-1.8.19.custom.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/CustomJS/HorizontalTabs.js")" type="text/javascript"></script> <link href="@Url.Content("~/Content/SOX_Site.css")" rel="stylesheet" type="text/css" /> <style type="text/css"> /******CSS For Tab*********/ .ui-tabs { height:10em; width:700px; border:0px; } .ui-tabs-nav li { margin:0px 0px 0 0; } .ui-tabs-nav li a:link, .ui-tabs-nav li a:visited, .ui-tabs-nav li a:hover, .ui-tabs-nav li a:active { font-size:14px; padding:4px 2.8em 3px; } #tabs-1 { margin: -.1em 0 0 .23em;border: 1px solid #bdbdbd; width:655px;height:500px;} #tabs-2 { margin: -.1em 0 0 .23em;border: 1px solid #bdbdbd; width:655px;height:500px;} #tabs-3 { margin: -.1em 0 0 .23em;border: 1px solid #bdbdbd; width:655px;height:500px;} #tabs-4 { margin: -.1em 0 0 .23em;border: 1px solid #bdbdbd; width:655px;height:500px;} #tabs-5 { margin: -.1em 0 0 .23em;border: 1px solid #bdbdbd; width:655px;height:500px;} #tabs-6 { margin: -.1em 0 0 .23em;border: 1px solid #bdbdbd; width:655px;height:500px;} #tabs-7 { margin: -.1em 0 0 .23em;border: 1px solid #bdbdbd; width:655px;height:500px;} #tabs-8 { margin: -.1em 0 0 .23em;border: 1px solid #bdbdbd; width:655px;height:500px;} .fixtext { position:absolute; top:10px; left:0px; font-size:12px;} /*****************************End**********************************/ </style> <script type="text/javascript"> jQuery(document).ready(function ($) { $("#tabs").tabs(); }); </script> <div id="tabs" style="background-image:none !important;"> <ul style="background-image:none !important;"> <li><a href="#tabs-1"> <span class="fixtext"> Control</span></a></li> <li><a href="#tabs-2"> <span class="fixtext"> Accounts</span></a></li> <li><a href="#tabs-3"> <span class="fixtext"> Scripts</span></a></li> <li><a href="#tabs-4"> <span class="fixtext"> Tests</span></a></li> <li><a href="#tabs-5"> <span class="fixtext"> Issues</span></a></li> <li><a href="#tabs-6"> <span class="fixtext"> Policy</span></a></li> <li><a href="#tabs-7"> <span class="fixtext"> Attachments</span></a></li> <li><a href="#tabs-8"> <span class="fixtext"> History</span></a></li> </ul> <div id="tabs-1"> </div> <div id="tabs-2"> </div> <div id="tabs-3"> </div> <div id="tabs-4"> </div> <div id="tabs-5"> <div style=" width:100%; height:480px"> </div> <div style="text-align:center;"><input id="btnaddissue" type="button" value="Add issue" style="height:27px; padding-bottom:10px; font-weight:bold; color:Gray;" /></div> </div> <div id="tabs-6"> </div> <div id="tabs-7"> </div> <div id="tabs-8"> </div> </div> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function ($) { $("#adddialog").dialog({ autoOpen: false, width: 680, height: 500, modal: true, resizable: false }); $(".btnaddissue").click(function () { $("#adddialog").dialog("open"); }); $("#btnaddissue").click(function () { $("#adddialog").html("") .dialog("option", "title", "new deficiency ") .load("/Deficiency/AddDeficiency", function () { $("#adddialog").dialog("open"); }); }); $('<a href="#" class="ui-titlebar-other ui-corner-all ui-state-default"></a>') .append('<span class="ui-icon ui-icon-minus"></span>') .appendTo('.ui-dialog-titlebar').addClass("ui-iconclose") .css({ width: "20px", height: "20px", margin: "0px -10px 0px 0px" }) .click(function () { $("#adddialog").dialog("close"); alert($(this).html()) }); alert($("#dialogdetail").hasClass('.ui-dialog-titlebar')) // $('<a href="#" class="ui-titlebar-other ui-corner-all ui-state-default"></a>') // .append('<span class="ui-icon ui-icon-minus"></span>') // .appendTo('.ui-dialog-titlebar').addClass("ui-icon1") // .css({ // width: "30px", // height: "20px", // margin: "0px 50px 0px 0px" // }) // .click(function () { // alert("email"); // }); // $('<a href="#" class="ui-titlebar-other ui-corner-all ui-state-default"></a>') // .append('<span class="ui-icon ui-icon-minus"></span>') // .appendTo('.ui-dialog-titlebar').addClass("ui-iconright") // .css({ // width: "20px", // height: "20px", // margin: "0px 40px 0px 0px" // }) // .click(function () { // alert("next"); // }); // $('<a href="#" class="ui-titlebar-other ui-corner-all ui-state-default"></a>') // .append('<span class="ui-icon ui-icon-minus"></span>') // .appendTo('.ui-dialog-titlebar').addClass("ui-iconleft") // .css({ // width: "20px", // height: "20px", // margin: "0px 5px 0px 0px" // }) // .click(function () { // alert("previous"); // }); }); </script> <div id="adddialog" title="" class="Hidden"></div>
其中此段代码在弹出弹会重复执行：
$('<a href="#" class="ui-titlebar-other ui-corner-all ui-state-default"></a>') .append('<span class="ui-icon ui-icon-minus"></span>') .appendTo('.ui-dialog-titlebar').addClass("ui-iconclose") .css({ width: "20px", height: "20px", margin: "0px -10px 0px 0px" }) .click(function () { $("#dialogdetail").dialog("close"); }); $('<a href="#" class="ui-titlebar-other ui-corner-all ui-state-default"></a>') .append('<span class="ui-icon ui-icon-minus"></span>') .appendTo('.ui-dialog-titlebar').addClass("ui-icon1") .css({ width: "30px", height: "20px", margin: "0px 50px 0px 0px" }) .click(function () { alert("sdgsdhge"); }); $('<a href="#" class="ui-titlebar-other ui-corner-all ui-state-default"></a>') .append('<span class="ui-icon ui-icon-minus"></span>') .appendTo('.ui-dialog-titlebar').addClass("ui-iconright") .css({ width: "20px", height: "20px", margin: "0px 40px 0px 0px" }) .click(function () { alert("sdgsdhge"); }); $('<a href="#" class="ui-titlebar-other ui-corner-all ui-state-default"></a>') .append('<span class="ui-icon ui-icon-minus"></span>') .appendTo('.ui-dialog-titlebar').addClass("ui-iconleft") .css({ width: "20px", height: "20px", margin: "0px 5px 0px 0px" }) .click(function () { alert("sdgsdhge"); });
重复执行后第二次弹出窗中的事件和样式会把第一次的重复增加，有什么办法在给弹出窗添加样式和事件的时候指定到指定的窗口中。
所有回答(1)
-1
建议重新添加一下代码，点击编辑器中的最后一个按钮。