JQuery - Caixa de dialogo modal simples

<< Click to Display Table of Contents >>

Navigation:  jQuery >

JQuery - Caixa de dialogo modal simples

Previous pageReturn to chapter overviewNext page

Info

 

Pressiona um botão, mostra uma mensagem modal via jQuery e pronto.

 

Tela

 

jquery-confirm-dialog4

 

aspx

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

 

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

 

    <script type="text/javascript">

        function ShowCaixaDialogo() {

            $('#div_dialogo').dialog({

                modal: true,

                width: 'auto',

                resizable: false,

                draggable: false,

                buttons: {

                    'OK'function () { $(this).dialog('close'); }

                }

            });

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <asp:Button ID="btBotao" runat="server" OnClick="btBotao_Click" Text="Botão" OnClientClick="ShowCaixaDialogo(); return false;" />

 

            <div id="div_dialogo" style="displaynone;" title="Informação">

                <p>

                    Parabéns você abriu uma caixa de diálogo

                </p>

            </div>

        </div>

    </form>

</body>

</html>

 

cs

 

using System;

 

namespace WebApplication1

{

    public partial class WebForm1 : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

 

        }

 

        protected void btBotao_Click(object sender, EventArgs e)

        {

        }

    }

}