Janela Sim-Não

<< Click to Display Table of Contents >>

Navigation:  jQuery > Janela Modal >

Janela Sim-Não

Previous pageReturn to chapter overviewNext page

Telas

 

modal4

 

Ao clicar:

 

modal5

 

Html

 

<!DOCTYPE html>

<html>

<head>

<title> SimpleModal Confirm Modal Dialog </title>

<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />

<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />

</head>

<body>

<div id='container'>

 <div id='logo'>

         <h1>Simples<span>Modal</span></h1>

         <span class='title'>Tela de Sim-Não</span>

 </div>

 <div id='content'>

         <div id='confirm-dialog'>

                 <h3>Confirm Override</h3>

                 <p>A modal dialog override of the JavaScript confirm function. Demonstrates the use of the <code>onShow</code> callback as well as how to display a modal dialog confirmation instead of the default JavaScript confirm dialog.</p>

                 <input type='button' name='confirm' class='confirm' value='Demo'/> or <a href='#' class='confirm'>Demo</a>

         </div>

         

         <!-- modal content -->

         <div id='confirm'>

                 <div class='header'><span>Confirm</span></div>

                 <div class='message'></div>

                 <div class='buttons'>

                         <div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>

                 </div>

         </div>

         <!-- preload the images -->

         <div style='display:none'>

                 <img src='img/confirm/header.gif' alt='' />

                 <img src='img/confirm/button.gif' alt='' />

         </div>

 </div>

</div>

<script type='text/javascript' src='js/jquery.js'></script>

<script type='text/javascript' src='js/jquery.simplemodal.js'></script>

<script type='text/javascript' src='js/confirm.js'></script>

</body>

</html>

 

Confirmado.aspx

 

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

 

<!DOCTYPE html>

 

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

<head runat="server">

    <title></title>

</head>

<body>

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

        <div>

            <h1>Confirmado!</h1>

        </div>

    </form>

</body>

</html>

 

confirm.js

 

jQuery(function ($) {

 $('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {

         e.preventDefault();

         // example of calling the confirm function you must use a callback function to perform the "yes" action

         confirm("Abrir a página Confirmado.aspx?", function () {

                 window.location.href = 'Confirmado.aspx';

         });

 });

});

 

function confirm(message, callback) {

 $('#confirm').modal({

         closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",

         position: ["20%",],

         overlayId: 'confirm-overlay',

         containerId: 'confirm-container', 

         onShow: function (dialog) {

                 var modal = this;

                 $('.message', dialog.data[0]).append(message);

                 // if the user clicks "yes"

                 $('.yes', dialog.data[0]).click(function () {

                         // call the callback

                         if ($.isFunction(callback)) {

                                 callback.apply();

                         }

                         // close the dialog

                         modal.close(); // or $.modal.close();

                 });

         }

 });

}

 

 

Arquivos

 

http://help.market.com.br/csharp/files/janela_sim_nao.rar

 

 

Fonte

 

http://www.ericmmartin.com/projects/simplemodal-demos/