Janela Simples

<< Click to Display Table of Contents >>

Navigation:  jQuery > Janela Modal >

Janela Simples

Previous pageReturn to chapter overviewNext page

Tela

 

modal2

 

Ao clicar no botão:

 

modal3

 

 

Fonte

 

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

 

<!DOCTYPE html>

 

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

<head runat="server">

    <!-- Page styles -->

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

    <!-- Contact Form CSS files -->

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

</head>

<body>

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

 

        <div id='container'>

            <div id='logo'>

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

                <span class='title'>Janela Modal usando jQuery</span>

            </div>

            <div id='content'>

                <div id='basic-modal'>

                    <h3>Janela Modal Simples</h3>

                    <p>Para a aparencia da janela verifica o CSS</p>

                    <input type='button' name='basic' value='Clique-me' class='basic' />

                    or <a href='#' class='basic'>Clique aqui</a>

                </div>

 

                <!-- conteúdo da janela modal -->

                <div id="basic-modal-content">

                    <h3>Basic Modal Dialog</h3>

                    <p>For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with an AJAX response, standard HTML or DOM element(s).</p>

                    <p>Examples:</p>

                    <p><code>$('#basicModalContent').modal(); // jQuery object - this demo</code></p>

                    <p><code>$.modal(document.getElementById('basicModalContent')); // DOM</code></p>

                    <p><code>$.modal('&lt;p&gt;&lt;b&gt;HTML&lt;/b&gt; elements&lt;/p&gt;'); // HTML</code></p>

                    <p><code>$('&lt;div&gt;&lt;/div&gt;').load('page.html').modal(); // AJAX</code></p>

 

                    <p><a href='http://www.google.com.br'>More details...</a></p>

                </div>

 

                <!-- preload the images -->

                <div style='displaynone'>

                    <img src='img/basic/x.png' alt='' />

                </div>

            </div>

            <div id='footer'>

                &copy; 2012 Eric Martin | <a href='http://www.ericmmartin.com/'>ericmmartin.com</a>

            </div>

        </div>

    </form>

    <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/basic.js'></script>

</body>

</html>

 

Projeto

 

modal1

 

Arquivos

 

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

 

Fonte

 

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