Task-Based Help / Using the Modal Dialog Option / Creating an Alert Dialog Box
Creating an Alert Dialog Box

You can use C1Dialog to alert users to information they need to know, such as when an upload completes. For this topic, we will create a Modal Alert window that tells users that their upload has completed.

Complete the following steps:

  1. Go to the Source View of your project.
  2. Locate the first pair of <asp:Content> tags. Insert the following script between them:

    To write code in Source View

    <script type="text/javascript">
    function btnClick() {
    $(this).c1dialog("close");
    }
    </script>
  3. Locate the <cc1:C1Dialog> tags and insert the following markup after the runat="server" property:

    To write code in Source View

    Width="450px" Height="285px" Modal="true"
    Stack="True" CloseText="Close" Title="Upload file">
    <Content>
    <p>
    <span class="ui-icon ui-icon-circle-check"></span>Your files have uploaded successfully!
    </p>
    </Content>
    <ExpandingAnimation Duration="400">
    </ExpandingAnimation>
    <Buttons>
    <cc1:DialogButton OnClientClick="btnClick" Text="OK" />
    </Buttons>
    <CaptionButtons>
    <Pin Visible="False" />
    <Refresh Visible="False" />
    <Toggle Visible="False" />
    <Minimize Visible="False" />
    <Maximize Visible="False" />
    </CaptionButtons>
    <CollapsingAnimation Duration="300" />
  4. Run your program. The Alert window should resemble the following image:

    C1Dialog

    Note that all the Caption Bar buttons except for the Close button have been disabled.