Terry's blog

是建高楼大厦,还是搭窝棚?--------我要建高楼大厦。"只要决心成功,失败就不会把我们击垮" -------《羊皮卷》

博客园 首页 新随笔 联系 订阅 管理
  333 Posts :: 1 Stories :: 207 Comments :: 51 Trackbacks

功能:
    使用时,会使整个屏幕都会是灰色的,只有一个“模式”对话框可以操作. ModalPopup是一个扩展控件,它建立在已经存在panel等容器控件的基础上,而panel上可以放置任何控件,panel的样式也是自定义的. 当控件使用时, 点击panel之外的操作都是无效的.

属性:    

TargetControlID

点击后出现对话框的控件,一般为按钮控件

PopupControlID

对话框中的Panelid

BackgroundCssClass

背景的css

DropShadow

对话框是否有阴影效果

OkControlID

Ok按钮的id

OnOkScript

Ok按钮触发脚本

CancelControlID

Cancel按钮的id

OkCancelScript

Cancel按钮触发脚本

PopupDragHandleControlID

Panel的中的标题栏,可以拖动,一般也是Panel

X

出现时,顶部的位置。

Y

出现时,左边的位置。

代码实例
    主要代码如下:

<form id="form1" runat="server">
    
<asp:ScriptManager ID="ScriptManager1" runat="server">
    
</asp:ScriptManager>
  
<asp:Panel ID="Panel1" runat="server">
  
ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. However, AJAX isn't just for ASP.NET. You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers. 
</asp:Panel>
      
  
<asp:LinkButton ID="btnChangeStyle" runat="server" ToolTip="Click here to change the paragraph style"  >Click here to change the paragraph style</asp:LinkButton>
    
    
<asp:Panel ID="panModalPopup" runat="server"
               CssClass
="cssModalPopup"
               Style
="display: none">
      
<table cellspacing="10" width="100%">
        
<tr align="center">
          
<td colspan="2">
            请选择您喜欢的样式:
          
</td>
        
</tr>
        
<tr>
          
<td colspan="2">
            
<input id="Radio1" type="radio" name="Radio" onclick="styleSelected = 'cssStyle1';" />
            
<label class="cssStyle1" for="Radio1" style="padding: 3px;">
              选用这个样式。
            
</label>
          
</td>
        
</tr>
        
<tr>
          
<td colspan="2">
            
<input id="Radio2" type="radio" name="Radio" onclick="styleSelected = 'cssStyle2';" />
            
<label class="cssStyle2" for="Radio2" style="padding: 3px">
              选用这个样式。
            
</label>
          
</td>
        
</tr>
        
<tr>
          
<td colspan="2">
            
<input id="Radio3" name="Radio" onclick="styleSelected = 'cssStyle3';" type="radio" />
            
<label class="cssStyle3" for="Radio3" style="padding: 3px;">
              选用这个样式。
            
</label>
          
</td>
        
</tr>
        
<tr>
          
<td colspan="2">
            
<input id="Radio4" name="Radio" onclick="styleSelected = 'cssStyle4';" type="radio" />
            
<label class="cssStyle4" for="Radio4" style="padding: 3px;">
              选用这个样式。
            
</label>
          
</td>
        
</tr>
        
<tr Align="center">
          
<td>
            
<asp:Button ID="btnOK" runat="server" Text="确定" />
          
</td>
          
<td>
            
<asp:Button ID="btnCancel" runat="server" Text="取消" />
          
</td>
        
</tr>
      
</table>
    
</asp:Panel>
    
    
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
                                    TargetControlID
="btnChangeStyle"
                                    PopupControlID
="panModalPopup"
                                    BackgroundCssClass
="cssModalBackground"
                                    DropShadow
="true"
                                    OkControlID
="btnOK"
                                    OnOkScript
="changeStyle()"
                                    CancelControlID
="btnCancel">
    
</ajaxToolkit:ModalPopupExtender>
  
</form>


运行结果:
    

posted on 2007-11-05 17:42 王晓成 阅读(1216) 评论(3)  编辑 收藏 网摘 所属分类: Ajax

Feedback

#1楼 2008-06-07 11:54 胡[未注册用户]
我为何出来的效果不是全屏灰呢??????
而是ModalPopop下面的页面部分是灰的
能告诉我为什么吗??
谢谢

  回复  引用    

#2楼[楼主] 2008-06-10 15:24 王晓成      
@胡
你没加Css样式的原因

  回复  引用  查看    

#3楼 2008-12-01 11:13 soulf[未注册用户]
弹出的窗口 怎么居中啊 ???
  回复  引用    




发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 950086




相关文章:

相关链接: