我喜欢http://www.squarespace.com/templates/?q=minsk的注册过程——当你点击“使用这个模板开始”时，整个视口都被接管了，注册框显示向上。
有谁知道已经做了类似的事情的脚本？
问问题
4580 次
3 回答
2
您可以使用简单的 javascript 轻松完成。
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);
});
});
您可以单击覆盖以退出窗口。
看例子！
于 2013-03-01T11:47:07.027 回答
1
这称为模态窗口。您可以使用jQuery或 JavaScript来实现它。作为一个简单的开始，您可以查看Queness的Simple jQuery Modal Window Tutorial提供的教程。
代码非常简单。首先，您必须构建您的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>
一些用于演示外观的CSS 。
/* 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;
}
最后，用于交互的JavaScript 。
$(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();
});
});
您可以在Queness WebBlog的 Simple jQuery Modal Window Examples 中看到该项目的工作演示。单击该页面上的链接。Simple Window Modal
于 2013-03-01T11:32:34.580 回答
1
在寻找我遇到的类似情况时遇到了这个问题。我有一段自定义 javascript 代码用于我的 SS6 网站。您必须原谅我，因为我是设计师而不是开发人员。
有问题的网站：http: //tentenbtc.com
目前，在用户点击“Count Me In”后，会出现一个允许所述用户注册的弹出窗口。一切正常，但弹出窗口只是一个带有一些输入字段和一个提交按钮的 .png——不是很优雅，也不是响应式的。我想用一个使背景变暗的模态替换弹出窗口，这个线程看起来是开始解决我的方法的正确位置。顺便说一句，代码是内联的并被格式化以适合 SS 代码块。
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("your@email.com");
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("your@email.com");
$('#subscriberemail').focus();
return false;
}
if ( $checkme == "your@email.com" )
{
$('#subscriberemail').val("your@email.com");
$('#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="your@email.com"/>
<button id="addemail" class="hitmesmall" onclick="return subscribe()" >SUBMIT</button>
<button id="exitpopup" class="exitpopup" onclick="return closepopup()">X</button>
</div>
</body>
</html>
于 2014-04-15T00:59:10.067 回答