首页 新闻 搜索 专区 学院

关于弹出窗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">&nbsp;<span class="fixtext">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Control</span></a></li>
        <li><a href="#tabs-2">&nbsp;<span class="fixtext">&nbsp;&nbsp;&nbsp;&nbsp;Accounts</span></a></li>
        <li><a href="#tabs-3">&nbsp;<span class="fixtext">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Scripts</span></a></li>
        <li><a href="#tabs-4">&nbsp;<span class="fixtext">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tests</span></a></li>
        <li><a href="#tabs-5">&nbsp;<span class="fixtext">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Issues</span></a></li>
        <li><a href="#tabs-6">&nbsp;<span class="fixtext">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Policy</span></a></li>
        <li><a href="#tabs-7">&nbsp;<span class="fixtext">&nbsp;Attachments</span></a></li>
        <li><a href="#tabs-8">&nbsp;<span class="fixtext">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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");
    });

重复执行后第二次弹出窗中的事件和样式会把第一次的重复增加,有什么办法在给弹出窗添加样式和事件的时候指定到指定的窗口中。

     

wangming的主页 wangming | 初学一级 | 园豆:41
提问于:2012-05-30 22:19
< >
分享
所有回答(1)
-1

建议重新添加一下代码,点击编辑器中的最后一个按钮。

dudu | 园豆:36360 (高人七级) | 2012-05-30 22:44
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册