CSS

Question

有人可以解释如何编写foursquare.com上的反馈按钮吗？它是网页侧面的垂直按钮，它会打开一个新窗口并使背景变暗。我也在其他一些网站上看过这个。提前谢谢。

Answer 1

他们是如何做到的......

该按钮是通过http://getsatisfaction.com服务提供的。此服务类似于http://sharethis.com等其他服务，这些服务的存在可以最大限度地减少创建全面网站所需的编程。基本上你设置了一个帐户（我假设......），他们为你提供了一个javascript代码块，你在项目中包含了这个代码块，这会导致你的网站上出现垂直按钮。

自己动手......

这对你自己来说并不困难。我快速编写了一个jQuery示例。假设我们有以下标记：

<div id="feedback">
  <p>Here is where you would have your form.</p>
  <div class="toggler">?</div>
</div>

在这种情况下，

.toggler将是我们的按钮。我们希望将它放在反馈框之外，并使用一些css，并将反馈框放在一些css中：

#feedback { position:absolute; left:0; width:200px; padding:10px; 
            background:red; color:white; }
.toggler  { width:25px; height:50%; color:white; background:blue; 
            text-align:center; position:absolute; top:25%; 
            right:-25px; cursor:pointer }

这可以稍微清理一下。但是现在我们有了我们的元素，我们可以用jQuery添加一些toggle-logic：

$(function(){
  // When the user clicks on .toggler
  $(".toggler").click(function(e){
    // Get a reference to our feedback box
    var feedback = $("#feedback");
    // If it's in the process of being opened (or is opened)
    if ( $(feedback).hasClass("opened") ) {
      // Close it
      $(feedback)
        .removeClass("opened")
        .animate({"left":0}, 1000);
    } else {
      // Else, Open it
      $(feedback)
        .addClass("opened")
        .animate({"left":-$(feedback).outerWidth()}, 1000);
    }
  });
});

在线演示：http://jsbin.com/iyenu4

Answer 2

查看jquery和jquery UI javascript库，以实现这些类型的交互功能。

以下是一个示例：http://wpaoli.building58.com/2009/08/jquery-animated-feedback-tab-thingy/

Answer 3

看起来他们正在使用Lift modal dialog进行弹出和背景调光。

Answer 4

按钮可能使用CSS固定定位。固定定位意味着它保留在屏幕上的相同位置，而不是页面上。即使滚动，这也允许它“漂浮”在文本上。

弹出对话是一样的。点击该按钮可在display和none以外的其他内容之间切换none CSS属性，可能是block。

灰色背景，我猜是使用<div>和width:100%以及opacity和{{3}}创建了一个大的固定位置height:100%。

试试这个：

HTML

将其另存为example.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
    <title>Example</title>
    <link rel="stylesheet" href="example.css" type="text/css" />
    <script type="text/javascript" src="example.js"></script>
</head>
<body>
    <h1>Example</h1>
    <a id="clickhere">Click here for the popup!</a>
    <div id="main">

        <p>
            Lorem ipsum dolor sit amet
        </p>
    </div>

    <form id="popup" class="dialog" action="#">
        <div id="popupbackground"></div>
        <div class="dialog">
            <h2>Popup!</h2>
            <a id="closepopup">Click here to close this dialog</a>
        </div>
    </form>
</body>
</html>

CSS

将其另存为example.css：

html {
    height:100%;
}

body {
    height:100%;
}
form.dialog {
    height:100%;
    width:100%;
    position:fixed;
    top:0px;
    left:0px;
    text-align:center;
    padding-top:10%;
    display:none;
}
form.dialog div.dialog {
    width:400px;
    background-color:gray;
    margin:auto;
    text-align:left;
    border:2px solid black;
    padding:10px;
    position:relative;
    z-index:10;
}
form.dialog label {
    display:block;
}
form.dialog input {
    width:99%;
}
form.dialog textarea {
    width:99%;
    height:200px;
}
a {
    cursor:pointer;
    text-decoration:underline;
    font-weight:bold;
}
#popup #popupbackground {
    background:gray;
    opacity:0.4;
    filter:alpha(opacity=40);
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
}

的JavaScript

将其另存为example.js：

window.onload = function() {
    document.getElementById("clickhere").onclick = function() {
        document.getElementById("popup").style.display = "block";
    };

    document.getElementById("closepopup").onclick = function() {
        document.getElementById("popup").style.display = "none";
    };

};

由于<form>，width消耗整个屏幕的想法是height form.dialog规则中的<form>个属性。由于该规则还指定了固定位置，因此用户永远不会滚动离开此<div class="dialog">的内容。然后，我们可以使用margin:auto将<div id="popupbackground"></div>居中，以便它以页面为中心浮动。 {{1}}提供了褪色的灰色背景。

如何在网页上制作垂直按钮

4 个答案:

他们是如何做到的......

自己动手......

HTML

CSS

的JavaScript