|
<< Click to Display Table of Contents >> JQuery - Caixa de dialogo modal simples |
  
|
|
<< Click to Display Table of Contents >> JQuery - Caixa de dialogo modal simples |
|
Info
Pressiona um botão, mostra uma mensagem modal via jQuery e pronto.
Tela
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="display: none;" 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)
{
}
}
}