C# 2008 Programmer's Reference

   opacity:0.5;
  }
  .dialog {
   border-left:5px solid #fff;
   border-right:5px solid #fff;
   border-top:5px solid #fff;
   border-bottom:5px solid #fff;
   background:#ccc;
   padding: 10px;
   width: 350px;
  }
  </style>
  ...

The .modalBackground style defines the background color of the modal popup. In this case, it is used to block off the rest of the page and prevent the user from interacting with that content. The .dialog style defines the shape and color of the popup itself. Here it has a rectangular border of 5px and a width of 350px.

Next, add a <asp:Template> control to the GridView control to display a Delete button:

<asp:GridView ID='GridView1' runat='server'
 AllowPaging='True' AllowSorting='True'
 AutoGenerateColumns='False'
 BackColor='LightGoldenrodYellow'
 BorderColor='Tan'
 BorderWidth='1px' CellPadding='2'
 DataKeyNames='title_id'
 DataSourceID='LinqDataSource1'
 ForeColor='Black' GridLines='None'>
 <Columns>
  <asp:CommandField ShowDeleteButton='True'
   ShowEditButton='True' ShowSelectButton='True'/>
  <asp:TemplateField ControlStyle-Width='50px'
   HeaderStyle-Width='60px'
   ItemStyle-HorizontalAlign='Center'>
   <ItemTemplate>
    <asp:Button ID='btnDelete' runat='server'
     OnClick='btnDelete_Click'
     OnClientClick='displayPopup(this); return false;'
     Text='Delete'/>
   </ItemTemplate>
  </asp:TemplateField>
  <asp:BoundField DataField='title_id'
   HeaderText='title_id'
   ReadOnly='True' SortExpression='title_id'/>
  <asp:BoundField DataField='title1'
   HeaderText='title1' SortExpression='title1'/>
  ...

Notice that the Delete button has two events defined: OnClick and OnClientClick. In this example, when the user clicks the button, the JavaScript function named displayPopup() (which you will define shortly) is called. You insert the return false; statement to prevent a postback from occurring while the dialog is being displayed.

You also need to disable the Delete link in the GridView control because you now have the Delete button. Set the ShowDeleteButton attribute in the <asp:CommandField> element to False:

<asp:CommandField
 ShowDeleteButton='False'
 ShowEditButton='True'
 ShowSelectButton='True'/>

The Default.aspx page now looks like Figure 17-29.

Figure 17-29

Create a new folder in the project and name it images. Add an image called delete.png into the images folder (see Figure 17-30).

Figure 17-30

You will now use a <div> element to define the content of the popup that you want to display:

   <div id='divDialog' runat='server'
    class='dialog' style='display:none'>
    <center>
     <img style='vertical-align:middle'
      src='images/delete.png' width='60'/>
     Are you sure you want to delete this record?<br/>
     <asp:Button ID='btnOK' runat='server'
      Text='Yes' Width='50px'/>
     <asp:Button ID='btnNO' runat='server'
      Text='No' Width='50px'/>
    </center>
   </div>
  </form>
 </body>
</html>

This block of code defines the popup shown in Figure 17-31.

Figure 17-31

To display the <div> element as a modal popup, use the ModalPopupExtender control:

   <cc1:ModalPopupExtender ID='popupDialog' runat='server'
    TargetControlID='divDialog' PopupControlID='divDialog'
    OkControlID='btnOK' CancelControlID='btnNO'
    OnOkScript='OK_Click();' OnCancelScript='No_Click();'
    BackgroundCssClass='modalBackground'>
   </cc1:ModalPopupExtender>
  </form>
 </body>
</html>

The ModalPopupExtender control has the attributes described in the following table.