漂亮的Alert 消息框!

ModalPopupExtender Confirm实例

 

我也是第一次使用ModalPopupExtender控件,以前都很少用AjaxControlToolkit里面的控件!!最近项目里面要用到一个Confirm但是又不是window的Confirm,想要一个div加个遮罩效果,于是,在网上找一个这样的效果.然后自己改版了一下,实现我想要的效果.老外的css水平真强!!

我这里用到了2个ModalPopupExtender控件!一个用来做消息提示框!另外一个用来做删除的确定/取消效果.!

<ajaxToolKit:ModalPopupExtender

                BehaviorID="mdlPopup" runat="server" TargetControlID="btnShow"

                PopupControlID="pnlPopup" OkControlID="btnYes" BackgroundCssClass="modalBackground" OnOkScript="BtndoPostBack();" />

 

            <asp:Panel ID="pnlPopup" runat="server" CssClass="confirm-dialog" style="display:none;">

                <div class="inner">

                    <h2>你 确 定 要 删 除 吗?</h2>

                    <div class="base">

                        <asp:Button ID="btnYes" runat="server" Text="确定" />

                        <input id="btnNo" type="button" value="取消" onclick="$find('mdlPopup').hide(); return false;" />    

                        <a onclick="$find('mdlPopup').hide(); return false;" href="javascript:void(0)" class="close"></a>

                    </div>

                </div>

            </asp:Panel>

这个用作删除确定的效果.代码有点不合理!如果大家有空可以拿去改改!!呵呵

这个是效果图!!

然后又放了一个用来做普通的消息提示框!

            <ajaxToolKit:ModalPopupExtender

                BehaviorID="showPopup" runat="server" TargetControlID="Button2"

                PopupControlID="Panel1"  BackgroundCssClass="modalBackground" />

                <asp:Panel ID="Panel1" runat="server" CssClass="confirm-dialog" style="display:none;">

                <div class="inner">

                    <h2>请 您 选 择 一 个 选 项!</h2>

                    <div class="base">

                        <input id="Button4" type="button" value="确定" onclick="$find('showPopup').hide(); return false;" />  

                        <a onclick="$find('showPopup').hide(); return false;" href="javascript:void(0)" class="close"></a>

                    </div>

                </div>

            </asp:Panel>

 

这里为了能执行服务端代码,我用了几个隐藏的Button服务器控件!然后在用__doPostBack("Button5","");提交!这样当点击去定的时候就会去执行服务端的代码!代码很简单哦!!喜欢的可以下载去玩玩!!

https://files.cnblogs.com/mextb1860/ModalPopupExtender.rar