Créer une boite de message smart en CSS3

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

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *