Mettre en valeur un formulaire et rendre toute la page en arrière plan

Signaler
-
primactif
Messages postés
119
Date d'inscription
vendredi 27 décembre 2002
Statut
Membre
Dernière intervention
3 octobre 2016
-
Bonsoir,je suis entrain de réaliser un projet en asp.net/c# en utilisant html et css aussi svp comment procéder pour rendre toute la page courante en arrière plan et ne mettre en valeur qu'un formulaire d'inscription? exactement comme dans le cas sion appuye sur se connecter dans ce site"http://www.aspfr.com" le formulaire devient en premier plan et tout le reste en arrière.

3 réponses

Messages postés
1540
Date d'inscription
lundi 26 mai 2003
Statut
Membre
Dernière intervention
1 août 2013
11
Salut,

JQueryUI propose des boîte de dialogue modales, ce sera certainement le plus simple pour toi (lien).
merci pour votre réponse, mais le problème ce code ne marche pas avec ma page aspx dès que j'appuye sur le bouton le formulaire apparait et disparait très vite et je ne sais pas pk?
voilà le code de ma page aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Detail.aspx.cs" Inherits="app.Detail" Theme="themeDetail"%>

<!DOCTYPE html>

<html >
<head runat="server">
    <title></title>
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <style>
    body { font-size: 62.5%; }
    label, input { display:block; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    fieldset { padding:0; border:0; margin-top:25px; }
    h1 { font-size: 1.2em; margin: .6em 0; }   
    .ui-dialog .ui-state-error { padding: .3em; }
    .validateTips { border: 1px solid transparent; padding: 0.3em; }
  </style>
  <script>
      $(function () {
          var name = $("#name"),
            email = $("#email"),
            password = $("#password"),
            allFields = $([]).add(name).add(email).add(password),
            tips = $(".validateTips");

          function updateTips(t) {
              tips
                .text(t)
                .addClass("ui-state-highlight");
              setTimeout(function () {
                  tips.removeClass("ui-state-highlight", 1500);
              }, 500);
          }

          function checkLength(o, n, min, max) {
              if (o.val().length > max || o.val().length < min) {
                  o.addClass("ui-state-error");
                  updateTips("Length of " + n + " must be between " +
                    min + " and " + max + ".");
                  return false;
              } else {
                  return true;
              }
          }

          function checkRegexp(o, regexp, n) {
              if (!(regexp.test(o.val()))) {
                  o.addClass("ui-state-error");
                  updateTips(n);
                  return false;
              } else {
                  return true;
              }
          }

          $("#dialog-form").dialog({
              autoOpen: false,
              height: 300,
              width: 350,
              modal: true,
              buttons: {
                  "Create an account": function () {
                      var bValid = true;
                      allFields.removeClass("ui-state-error");

                      bValid = bValid && checkLength(name, "username", 3, 16);
                      bValid = bValid && checkLength(email, "email", 6, 80);
                      bValid = bValid && checkLength(password, "password", 5, 16);

                      bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter.");
                      // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                      bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com");
                      bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");

                      if (bValid) {
                          /*$( "#users tbody" ).append( "<tr>" +
                            "<td>" + name.val() + "</td>" +
                            "<td>" + email.val() + "</td>" +
                            "<td>" + password.val() + "</td>" +
                          "</tr>" );*/
                          $(this).dialog("close");
                      }
                  },
                  Cancel: function () {
                      $(this).dialog("close");
                  }
              },
              close: function () {
                  allFields.val("").removeClass("ui-state-error");
              }
          });

          $("#create-user")
            .button()
            .click(function () {
                $("#dialog-form").dialog("open");
            });
      });
  </script>
</head>

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

  All form fields are required.


 
  
  <fieldset>
    <label for="name">Name</label>
    
    <label for="email">Email</label>
    
    <label for="password">Password</label>
    
  </fieldset>
 


    

        

        

        
          [~/Accueil.aspx Accueil]</li>
                        <li>[~/CoursPublic.aspx Cours]</li>
                        <li>[~/Mail.aspx Mail]</li>
                        <li>[~/Forum.aspx Forum]</li>
                        <li>[~/Contact.aspx Contact]</li>
                    
                </nav>
               
Create new user
                   


  </form>

</html>
Messages postés
119
Date d'inscription
vendredi 27 décembre 2002
Statut
Membre
Dernière intervention
3 octobre 2016
1