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);