前端消息提示框匯總

<script type="text/javascript">
    var rr = false;
    function layer_confirm() {
        //詢問框
        var index = layer.confirm('支付成功將扣除相應金額，是否確認支付？',
            {
                btn: ['確認', '取消'] //按鈕
            },
            function (index) {
                rr = true;
                __doPostBack('<%= btn_pay.UniqueID %>', '');
                layer.close(index);

            },
            function (index) {
                rr = false;
                layer.close(index);
            });
            return rr;
        }
</script>

　　

↑ 這是普通按鈕在OnServerClick之前的OnClick方法中的js形式的消息框 OnClick="return layer_Convfirm();"，要先定rr=false是因為如果不定義false那么提示框結果默認為true，閃現之后直接執行后面的方法，先定義false之后提示框會一直停留，直到用戶選擇確定或者取消按鈕才會消失

 ↓ 這是適用於repeater的oncommand方法的提示框,如果在repeater中循環添加了很多按鈕,那么按鈕的響應事件就是在oncommand方法中實現,

    可是有時候並不想直接執行方法,會在執行前進行一個詢問框的提示,只有在詢問框中選擇yes才會執行oncommand方法,這時候就用以下方式進行消息提示框的顯示

//這是在cs中pageload方法前的初始化以及判斷repeater中的參數是否為空的方法 
        private string Argument = string.Empty;
        private string CommandName = string.Empty;
        protected void Page_Load(object sender, EventArgs e)
        {
            CommandName = Request.Params.Get("__EVENTTARGET");
            Argument = Request.Params.Get("__EVENTARGUMENT");
                if (!string.IsNullOrEmpty(Argument))
                {
                    if (Argument == "rep_UsedBookList_ItemCommand")
                    {
                        rep_UsedBookList_ItemCommand(CommandName);
                    }
                }
        }

//這是在repeater的默認oncommand方法中將參數傳遞給重載的oncommand方法
protected void rep_UsedBookList_ItemCommand(object source, RepeaterCommandEventArgs e)
        {
            if (e.CommandName == "tuihuo")
            {
                rep_UsedBookList_ItemCommand(e.CommandName + "," + e.CommandArgument);

            }
            if (e.CommandName == "querenshouhuo")
            {
 　　　　　　　　//在后台設置前台提示框的方法
                StartupScript.Register(this,
                    "layer_confirm('" + e.CommandName + "," + e.CommandArgument + "','rep_UsedBookList_ItemCommand','是否確認收貨?');");
            }
        }

  protected void rep_UsedBookList_ItemCommand(string btname)
        {
            try
            {
               //將得到的參數分解,如果分解得到的不是兩個參數,直接return
                var CommandArgument = string.Empty;
                var CommandName = string.Empty;
                string[] arr = btname.Split(',');
                if (arr.Length != 2)
                {
                    return;
                }
                for (int i = 0; i < arr.Length; i++)
                {
                    if (string.IsNullOrEmpty(arr[i]))
                    {
                        return;
                    }
                    if (i == 0)
                        CommandName = arr[i];
                    if (i == 1)
                        CommandArgument = arr[i];
                }
                var ID = CommandArgument;
                //進行原本會在默認oncommand方法中執行的方法
                //點擊確認收貨按鈕
                if (CommandName == "querenshouhuo")
                {
                }
}
}
    

 

 ↓ 后台設置前端的提示框,將div設置成提示框的樣式,在js中執行顯示方法

<!--退貨原因-->
        <div id="inputReason" class="ui-form ui-form-popover sizing" runat="server">
            <div class="form-popover sizing">
                <div class="form-main">
                    <div class="ui-input-group">
                        <input type="text" id="txt_reason" runat="server" value="" class="ui-input-item" placeholder="請輸入退貨原因" />
                    </div>
                    <div class="ui-button-group">
                        <button class="ui-btn ui-btn-submit" style="width: 40%" runat="server" id="btn_Commit" onserverclick="btn_Commit_OnServerClick">確認</button>
                        <button class="ui-btn ui-btn-submit" style="width: 40%" runat="server" id="btn_Cancel" onserverclick="btn_Cancel_OnServerClick">取消</button>
                    </div>
                </div>
            </div>
        </div>

//這是按鈕的響應事件 
protected void lb_querenshouhuo_Click(object sender, EventArgs e)
     {
       var btn = (LinkButton)sender;
        //執行js中的方法,顯示div
        StartupScript.Register(this, "inputReason()");
      }

// 輸入退貨原因
function inputReason() {
   //inputreason是div的id
    $('#inputReason').show();
    $('.ui-overlay').show();
    //$(".ui-tabs-main > .ui-tabs-content").eq(1).fadeIn().siblings().hide();
};