Boîte de saisie de l'ascension de l'écran plein – comme on l'a vu sur le carré

Vous pouvez le faire très facilement avec un javascript simple.

HTML:

<div id="trigger">Click to open</div> <div id="overlay"></div> <div id="login"> <h1>title</h1> <form action="/login" method="POST"> <label>Username: <input type="email" name="username" /> </label> <label>Password: <input type="password" name="pass" /> </label> <button>Login</button> </form> </div> 

CSS:

 #overlay, #login { display: none; } #overlay { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background: black; opacity: 0.7; filter:alpha(Opacity=70); z-index: 999; } /* Change styles as you like beyond here, make sure the z-index of #login be always higher than #overlay */ #login { position:fixed; top: 5%; left: 35%; width: 30%; height: 50%; background: #555; padding: 5px; color:white; z-index: 1000; } #login h1 { margin: 0.5em 0; } #login form input { width: 90%; padding: 5px; } #trigger { width: 100px; padding: 5px; background: #ccc; } 

Javascript (jQuery):

 $(function(){ $('#trigger').click(function(){ $('#login').fadeIn(500); $('#overlay').fadeIn(500); }); $('#overlay').click(function(){ $('#login').fadeOut(500); $('#overlay').fadeOut(500); }); }); 

Vous pouvez cliquer sur la superposition pour quitter la fenêtre.

Voyez l' exemple !

C'est ce qu'on appelle la fenêtre Modal . Vous pouvez le faire en utilisant jQuery ou JavaScript. Pour un début simple, vous pouvez consulter le didacticiel donné par le didacticiel de la fenêtre de jQuery simple de Queness .

Le code est très simple. D'abord, vous devez construire votre HTML .

 <!-- #dialog is the id of a DIV defined in the code below --> <a href="#dialog" name="modal">Simple Modal Window</a> <div id="boxes"> <!-- #customize your modal window here --> <div id="dialog" class="window"> <b>Testing of Modal Window</b> | <!-- close button is defined as close class --> <a href="#" class="close">Close it</a> </div> <!-- Do not remove div#mask, because you'll need it to fill the whole screen --> <div id="mask"></div> </div> 

Certains CSS pour le look et la sensation de présentation.

 /* Z-index of #mask must lower than #boxes .window */ #mask { position:absolute; z-index:9000; background-color:#000; display:none; } #boxes .window { position:fixed; width:440px; height:200px; display:none; z-index:9999; padding:20px; } /* Customize your modal window here, you can add background image too */ #boxes #dialog { width:375px; height:203px; } 

Et enfin, JavaScript pour les interactions.

 $(document).ready(function() { //select all the a tag with name equal to modal $('a[name=modal]').click(function(e) { //Cancel the link behavior e.preventDefault(); //Get the A tag var id = $(this).attr('href'); //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set height and width to mask to fill up the whole screen $('#mask').css({'width':maskWidth,'height':maskHeight}); //transition effect $('#mask').fadeIn(1000); $('#mask').fadeTo("slow",0.8); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $(id).css('top', winH/2-$(id).height()/2); $(id).css('left', winW/2-$(id).width()/2); //transition effect $(id).fadeIn(2000); }); //if close button is clicked $('.window .close').click(function (e) { //Cancel the link behavior e.preventDefault(); $('#mask, .window').hide(); }); //if mask is clicked $('#mask').click(function () { $(this).hide(); $('.window').hide(); }); }); 

Vous pouvez voir une démonstration de travail de ce projet hébergé dans les exemples simples de Fenêtre Modale jQuery de Queness WebBlog . Cliquez sur le lien Simple Window Modal sur cette page.

C'est à la recherche d'une situation similaire que j'ai. J'ai un code javascript personnalisé que j'utilise avec mon site SS6. Vous devrez me pardonner, car je suis designer et pas de développeur.

Site en question: http://tentenbtc.com

Actuellement, après qu'un utilisateur clique sur "Count Me In", une fenêtre contextuelle apparaît qui permet à l'utilisateur de s'inscrire. Tout fonctionne bien et tout, mais le popup est juste un .png avec certains champs de saisie et un bouton de soumission – pas très élégant et pas réactif. Je voudrais remplacer la fenêtre contextuelle par un mode qui diminue l'arrière-plan, et ce fil semble être le bon endroit pour commencer à résoudre mon approche. Btw, le code est en ligne et formaté pour entrer dans un codebloc SS.

Code pour le widget javascript:

 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="https://www.parsecdn.com/js/parse-1.0.19.min.js"></script> <style> .bgimg { background-image: url("/s/bluebk.jpg"); } #overlay_form{ position:relative; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border: 0px solid black; width: 640px; height: 340px; background-image: url("https://static.squarespace.com/static/532ccd30e4b00d0eac2a448c/t/533acaffe4b0cd1c8b92271c/1396361983567/tenfortenpopup.png"); background-repeat:no-repeat; background-size: 100% 100%; overflow:Hidden; margin:0px auto; margin-top: -344px !important; } .slemail{ border:0px solid white; font-size: 22px !important; width: 310px; height: 40px; font-family: "Futura-pt"; color:#ababab; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; position: absolute; left: 34px; bottom: 20px; -webkit-appearance : none; padding-left:5px; } .countertext{ font-family: "futura-pt"; text-transform: uppercase; letter-spacing: 4px; color:white; font-size: 52.55px; font-weight: 700; font-style: normal; line-height: 1; text-align: center; margin: 0px, auto; margin-top: 24px; } .counternumber { font-family: "futura-pt"; text-transform: uppercase; letter-spacing: 0px; color:white; font-size: 100.55px; padding:3px; display: inline-block; line-height: 100%; font-weight: 700; font-style: normal; background: none !important; margin-left: auto; margin-right: auto; margin-top: -5px; } .hitme { -webkit-border-radius: 45px; -moz-border-radius: 45px; border-radius: 4px; border: solid 1px Black; display:inline-block; width: 70%; line-height: 1.482; text-align: center; font-family: "futura-pt"; font-size: 38.28px; font-weight: 400; font-style: normal; background-color:#343e3d; color:white; letter-spacing:2px; text-transform: uppercase; margin: 0px, auto; margin-top: 13px; } .hitmesmall:active { right: 38px } .hitmesmall { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; display:inline-block; width: 200px; padding:2px 10px; font-family: "futura-pt"; font-size: 22px; background-color:#666666; color:white; letter-spacing:1px; height:41px; position: absolute; right: 40px; bottom: 20px; border: solid 0px #343e3d; } input:focus{ outline:none; } .exitpopup { position: absolute; right: 5px; top: 4px; } </style> <script TYPE="text/javascript"> //mailchimp javascript block //////////////////////////// //Ten for Ten var arr = { apikey: "3865eadb82f9d9951067ff814b6fe34a-us4", id: "9f12ac9801", double_optin:"false", email:{ email: "replacewithemail" } } var url = "https://us4.api.mailchimp.com/2.0/lists/subscribe.json"; function mailchimp_addemail($email) { arr.email.email = $email; $.ajax({ type: "GET", url: url, contentType: "application/json", async: false, cache: false, dataType: "jsonp", data: arr, complete: function(jqXHR, textStatus){ // alert("Mailchimp added"); } }) return false; } // end mailchimp javascript block </script> <script TYPE="text/javascript"> //popup javascript block //////////////////////// function validateEmail($email) { var re = /\S+@\S+\.\S+/; return re.test($email); } function openpopup() { $("#overlay_form").fadeIn(10); $('#subscriberemail').focus(); $('#subscriberemail').val("[email protected]"); just_count(); return false; } function closepopup() { $("#overlay_form").fadeOut(10); return false; } function subscribe() { var $email = $('#subscriberemail').val(); var $checkme = $email.toLowerCase(); if ( validateEmail($checkme) == false) { $('#subscriberemail').val("[email protected]"); $('#subscriberemail').focus(); return false; } if ( $checkme == "[email protected]" ) { $('#subscriberemail').val("[email protected]"); $('#subscriberemail').focus(); return false; } // kick off the parse.com stuff // the mailchimp call gets made on success parse_add($email); return false; } //end popup javascript block </script> <script TYPE="text/javascript"> //generic javascript block // parse.com Appid and jskey //////////////////////// function numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } //Ten For Ten var parseappid = "I8bjfDP5GK8UKA509BFUQAsTRmHHgocl1ppSAwDO"; var parsejskey = "JxvgeMDJQuHCwinZjq8TBEJmx1KUd3EwtcOmSr3e"; var subscriber; var sequence; $( document ).ready(function() { Parse.initialize(parseappid, parsejskey); subscriber = Parse.Object.extend("subscriber"); sequence = Parse.Object.extend("sequence"); // lets init the subscriber count parse_initcount(); }); </script> <script TYPE="text/javascript"> //parse.com javascript block //////////////////////////// function parse_addemail($email) { var addsubscriber = new subscriber(); addsubscriber.set("email", $email); addsubscriber.save(null, { success: function(object) { parse_incrementcount(); mailchimp_addemail($email); }, error: function(error) { alert("parse_addemail :" + error); } }); }; function just_count() { var query = new Parse.Query(sequence); query.get("FJ2FWGWED6", { success: function(object) { object.increment("counter"); object.save(); var s = object.get("counter"); var display = numberWithCommas(s); $("#curcount").html(display); }, error: function(error) { alert("parse_incrementcount :" + error); } }); }; function parse_incrementcount() { var query = new Parse.Query(sequence); query.get("FJ2FWGWED6", { success: function(object) { }, error: function(error) { alert("parse_incrementcount :" + error); } }); }; function parse_initcount() { var query = new Parse.Query(sequence); query.get("FJ2FWGWED6", { success: function(object) { var s = object.get("counter"); var display = numberWithCommas(s); $("#curcount").html(display); }, error: function(error) { alert("parse_initcount: " + error); } }); }; // this is called on from hitmesmall submit onclick /////////////////////////////////////////////////// function parse_add($email) { var query = new Parse.Query(subscriber); query.equalTo("email", $email); query.find({ success: function(object) { if ( object.length == 0 ) { parse_addemail($email); $('#subscriberemail').val("Congrats! Thanks for Pledging!"); } else { $('#subscriberemail').val("Email already Subscribed !"); $('#subscriberemail').focus(); } }, error: function(error) { alert("parse_add: " + error); } }); }; //end parse.com javascript block </script> </head> <body> <div class="bgimg" align=center> <br> <span class="counternumber" id="curcount">0</span> <br> <span class="countertext" id="pledged">PEOPLE HAVE PLEDGED! </span> <br> <button class="hitme" id="subscribe" onclick="return openpopup() ">COUNT ME IN!</button> <br> <br> <br> </div> <!-- popup form --> <div id="overlay_form" style="display:none"> <input id="subscriberemail" class="slemail" type="text" value="[email protected]"/> <button id="addemail" class="hitmesmall" onclick="return subscribe()" >SUBMIT</button> <button id="exitpopup" class="exitpopup" onclick="return closepopup()">X</button> </div> </body> </html>