Geeks With Blogs

News

Microsoft MVP


Moderator at CodeASP.NET


Quiz Master




free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

I was playing around with CSS and ASP.NET AJAX Modal Popup Control and wanted to have a popup that has a rounded corner outer shadows on it without using images. After searching the web for an existing solution I found this link and tried to apply it on my modal. Luckily I was able to make it work. Here's the whole code for my experiment:


   1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2:  <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
   3:  <html xmlns="http://www.w3.org/1999/xhtml">
   4:  <head runat="server">
   5:      <title></title>
   6:      <style type="text/css">
   7:       .modal-inner-wrapper
   8:       {
   9:          width:340px;
  10:          height:340px;
  11:          background-color:Gray;
  12:       }   
  13:       .modal-inner-wrapper .content
  14:       {
  15:          width:320px; height:320px; background-color:#FFFFFF; border: solid 1px Gray; z-index:9999;
  16:          float:right; margin-top:10px; margin-right:10px;
  17:       }
  18:       .modal-inner-wrapper .content .close
  19:       {
  20:           float:right; 
  21:       }
  22:       .modal-inner-wrapper .content .body
  23:       {
  24:           margin-top:20px;
  25:       }
  26:       .rounded-corners 
  27:       {
  28:          /*FOR OTHER MAJOR BROWSERS*/
  29:          -moz-border-radius: 5px;
  30:          -webkit-border-radius: 5px;
  31:          -khtml-border-radius: 5px;
  32:          border-radius: 5px;
  33:          /*FOR IE*/
  34:          behavior: url(border-radius.htc);
  35:      }
  36:      .rel {
  37:          position: relative;
  38:          z-index: inherit;
  39:          zoom: 1; /* For IE6 */
  40:      }
  41:      .modal-bg{
  42:          background-color:Gray;
  43:          filter:alpha(opacity=50);
  44:          opacity:0.6;
  45:          z-index:999;
  46:      }
  47:      .modal{
  48:          position:absolute;
  49:      }
  50:      </style>
  51:  </head>
  52:  <body>
  53:      <form id="form1" runat="server">
  54:      <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
  55:      <asp:Button ID="Button1" runat="server" Text="Show Modal" />
  56:          <asp:Panel ID="pnlModal" runat="server" CssClass="modal">
  57:              <div class="rel">
  58:                  <div class="modal-inner-wrapper rounded-corners">
  59:                      <div class="content rounded-corners">
  60:                              <div class="close">
  61:                                  <asp:LinkButton ID="btnClose" runat="server">close</asp:LinkButton>
  62:                              </div>
  63:                              <div class="body">
  64:                                  <p>I want beer!</p>
  65:                              </div>
  66:                      </div>
  67:                  </div>
  68:              </div>
  69:          </asp:Panel>
  70:      <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modal-bg" 
                                   TargetControlID="Button1" 
                                   PopupControlID="pnlModal" 
                                   CancelControlID="btnClose" >
  71:      </asp:ModalPopupExtender>
  72:      </form>
  73:  </body>
  74:  </html>

 

Note that you have to download the border-radius.htc here in order for this rounded corners to work in IE. You can find more details here: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

Notes: If you want to change the width and height of the modal-inner-wrapper then be sure also to change the width and height of the modal-inner-wrapper content. You can also adjust the margins of the rounded corner outer shadow by setting the values of the margin-top and margin-right css properties. You can also modify the whole css to conform with your needs.

Here's the sample output below:

Firefox 3.6.10

Chrome 8.0.552

IE 8

That's it! I hope someone find this post useful!

Technorati Tags: ,
Posted on Friday, January 21, 2011 11:55 PM ASP.NET , Tips&Tricks | Back to top


Comments on this post: ASP.NET AJAX Modal Popup Control with CSS Rounded Corners

# re: ASP.NET AJAX Modal Popup Control with CSS Rounded Corners
Requesting Gravatar...
nice article dude
Left by somasekhar akiri on Feb 15, 2011 1:12 PM

# re: ASP.NET AJAX Modal Popup Control with CSS Rounded Corners
Requesting Gravatar...
thx a lot
it works fine, could trigger it off in a gridview and loading a userControl into it (instead "i wand beer" )
got a lot of trash surfing the internet for this functionality

not yet live on my website
Left by Henry on Feb 17, 2011 7:17 AM

# re: ASP.NET AJAX Modal Popup Control with CSS Rounded Corners
Requesting Gravatar...
great stuff man! you rock it
Left by veera on Apr 28, 2011 12:36 PM

# re: ASP.NET AJAX Modal Popup Control with CSS Rounded Corners
Requesting Gravatar...
hi, in IE 8 it is not working can u tell me the suggestions..
Left by Brijesh on Jun 04, 2011 1:50 PM

# re: ASP.NET AJAX Modal Popup Control with CSS Rounded Corners
Requesting Gravatar...
It does for me! As you can see in the screen shot it is tested in IE8. Try to check the compatibility mode in the browser.
Left by Vinz on Jun 06, 2011 1:48 PM

# re: ASP.NET AJAX Modal Popup Control with CSS Rounded Corners
Requesting Gravatar...
Best article ever about modalpopup. it solved my problem. thanks.
Left by Munazza on Aug 25, 2011 2:46 PM

# re: ASP.NET AJAX Modal Popup Control with CSS Rounded Corners
Requesting Gravatar...
Hello.
How can you load the popup without clicking the button, only as page loads?
thanks in advance
Left by Bruno on Mar 14, 2012 7:24 PM

# re: ASP.NET AJAX Modal Popup Control with CSS Rounded Corners
Requesting Gravatar...
Thanks bro.this is an excelent artical.god bless you
Left by Abdul Qadir on Mar 26, 2012 10:51 PM

# re: ASP.NET AJAX Modal Popup Control with CSS Rounded Corners
Requesting Gravatar...
Hi Brijesh, it doesn't work for me in IE8 too (but works right int Chrome an Firefox). Have you resolve the compatibility whit IE8?

Thanks :)

Jax
Left by Jax on Dec 24, 2012 11:02 AM

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net | Join free