Question

嗨我有一种情况，我想在使用JavaScript的if语句中放入弹出代码？我的代码是

<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">


$(documnet).ready(function () {
    $("#AddToCartBtn").click(function (e) {
        ShowDialog(false);
        e.preventDefault();
    });

    $("#AddToCartBtn").click(function (e) {
        ShowDialog(true);
        e.preventDefault();
    });

    $("#btnClose").click(function (e) {
        HideDialog();
        e.preventDefault();
    });

    $("#btnSubmit").click(function (e) {
        var brand = $("#brands input:radio:checked").val();
        $("#output").html("<b>Your favorite mobile brand: </b>" + brand);
        HideDialog();
        e.preventDefault();
    });

});

function ShowDialog() {
    $("#overlay").show();
    $("#dialog").fadeIn(300);


    if (modal) {
        $("#overlay").unbind("click");
    }
    else {
        $("#overlay").click(function (e) {
            HideDialog();
        });
    }
}

function HideDialog() {
    $("#overlay").hide();
    $("#dialog").fadeOut(300);
}

继承人css ..

.web_dialog_overlay
{
position: fixed;
top: 0;


 right: 0;
   bottom: 0;
   left: 0;
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   background: #000000;
   opacity: .15;
   filter: alpha(opacity=15);
   -moz-opacity: .15;
   z-index: 101;
   display: none;
}
.web_dialog
{
   display: none;
   position: fixed;
   width: 380px;
   height: 200px;
   top: 50%;
   left: 50%;
   margin-left: -190px;
   margin-top: -100px;
   background-color: #ffffff;
   border: 2px solid #336699;
   padding: 0px;
   z-index: 102;
   font-family: Verdana;
   font-size: 10pt;
}
.web_dialog_title
{
   border-bottom: solid 2px #336699;
   background-color: #336699;
   padding: 4px;
   color: White;
   font-weight:bold;
}
.web_dialog_title a
{
   color: White;
   text-decoration: none;
}
.align_right
{
   text-align: right;
}

最后是asp按钮控件和

<asp:ImageButton ID="AddToCartBtn" runat="server" RowIndex='<%# Container.DisplayIndex %>'
                                        ImageUrl="~/Pictures/ShoppingCart.png" onClientClick="ShowDialog()"                                         
                                          />

<div id="output"></div>

<div id="overlay" runat="server" class="web_dialog_overlay"></div>

<div id="dialog" class="web_dialog">


<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
      <tr>
         <td class="web_dialog_title">Online Survey</td>
         <td class="web_dialog_title align_right">
            <a href="#" id="btnClose">Close</a>
         </td>
      </tr>
      <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
      </tr>
      <tr>
         <td colspan="2" style="padding-left: 15px;">
            <b>Choose your favorite mobile brand? </b>
         </td>
      </tr>
      <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
      </tr>
      <tr>
         <td colspan="2" style="padding-left: 15px;">
            <div id="brands">
               <input id="brand1" name="brand" type="radio" checked="checked" value="Nokia" /> Nokia
               <input id="brand2" name="brand" type="radio" value="Sony" /> Sony 
               <input id="brand3" name="brand" type="radio" value="Motorola" /> Motorola
            </div>
         </td>
      </tr>
      <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
      </tr>
      <tr>
         <td colspan="2" style="text-align: center;">
            <input id="btnSubmit" type="button" value="Submit" />
         </td>
      </tr>
   </table>
</div>

和它一样，但是当用户点击添加到购物车时，它将添加到whistlist但是当我点击添加到购物车弹出div必须显示

Answer 1

我通常设置一个将在视图中设置的全局值，然后在javascript操作中使用它。

例如，在视图中添加类似的东西：

<script type="text/javascript">
     window.showPopup=@(ViewBag.showPopup);
</script>

并在javascript文件中：

var showPopup;

$(document).ready(function () {
    $("#AddToCartBtn").click(function (e) {
        if(window.showPopup=1){
            ShowDialog(true);
        }
        e.preventDefault();
    });
});

Answer 2

您是否要为同一个AddToCartBtn点击设置两个事件处理程序？它们将在基本相同的时间运行，不可预测，最终完成。

如何使用javascript弹出div标签

2 个答案: