jeudi 26 septembre 2013

Créer une boite de message smart en CSS3


Ajouter les styles suivant dans la page HTML ou dans la feuille de style rattachée :

        .bouton_2013
        {
            font-size:18px;
            padding:3px;
            font-weight:bold; 
        }
        .modalDialog
        {
            position: fixed;
       font-family: Verdana, Arial;
       font-size:18px;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
       background: rgba(0,0,0,0.5);
       z-index: 99999;
       opacity:0;
       -webkit-transition: opacity 200ms ease-in;
       -moz-transition: opacity 200ms ease-in;
       transition: opacity 200ms ease-in;
       pointer-events: none;            
        display:none;
        }
        .modalDialog:target {
       opacity:1;
       pointer-events: auto;
        }
        .modalDialog > div {
       width: 400px;
       position: relative;
       margin: 15% auto;
       padding: 5px 20px 13px 20px;
       border-radius: 8px;
       background: #fff;
       background: -moz-linear-gradient(#fff, #ddd);
       background: -webkit-linear-gradient(#fff, #ddd);
       background: -o-linear-gradient(#fff, #ddd);
        }

Dans le body de la page HTML :

   <div id="openModal" class="modalDialog">
<div style="text-align:center;">
<p style="text-align:left;">
            <asp:Label ID="message_retour" runat="server"></asp:Label>
        </p>
        <input type="button" class="bouton_2013" value="OK" onclick="window.location='default.aspx';" />
</div>

    </div>

La valeur en gras doit être modifiée suivant l'action que vous voulez produire, ici l'appui sur le bouton provoque le chargement de la page d'accueil du site.

Côté code ASP.NET (.aspx.cs) :

            //remplissage du message
            message_retour.Text = "Votre message a bien été envoyé. Nous vous contacterons très rapidement.";
            //affichage de la boite
            string csname1 = "RemarqueScript";
            Type cstype = this.GetType();
            ClientScriptManager cs = Page.ClientScript;
            string cstext1 = "window.location.href='#openModal';document.getElementById('openModal').style.display = 'block';";
            cs.RegisterStartupScript(cstype, csname1, cstext1, true);