前端消息提示框汇总

最新推荐文章于 2024-03-27 23:55:13 发布

weixin_30485799

最新推荐文章于 2024-03-27 23:55:13 发布

阅读量637

点赞数

文章标签：前端前端框架 javascript ViewUI

原文链接：http://www.cnblogs.com/zjdbxdcxy/p/6698103.html

版权

<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>

aspx

//这是按钮的响应事件 
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();
};