Question

我已经使用codepen创建了搜索框，

<div id="wrap">
    <form action="" autocomplete="on">
        <input id="search" name="search" class="search-box" type="text" 
            placeholder="What're we looking for ?"><input id="search_submit"
            value="Rechercher" type="submit">
    </form>
</div>

这是DEMO

它工作正常，但我需要在新标签中显示文本输入行。

有人可以帮忙吗？

Answer 1

您好，您可以使用＆＃34; Window open（）方法＆＃34;点击搜索图标，对于window open（）方法，您需要创建一个新的html文件，您需要添加搜索字段。

Answer 2

如果您只需要点击图标然后转到另一个页面，则只需将提交输入更改为元素，请检查

小提琴：http://jsfiddle.net/zhouxiaoping/64vtfm0n/3/

我在这个小提琴中所做的是将输入更改为a元素，为其添加href，将z-index更改为4，这比另一个输入更大

<a id="search_submit" href="http://jsfiddle.net/zhouxiaoping/64vtfm0n/2/" >

我猜你需要的是点击图标然后输入内容然后提交它，你可能需要解释你真正想要的东西

Answer 3

根据您对链接网站的描述，您希望创建一些模式弹出窗口。但是，这可以使用类似下面的代码片段来实现，只需要很少的JS。

请注意：我不是js pro，所以我已经接受了jQuery（虽然这可以在vanilla js中完成，但我确定）。

$(document).ready(function() {
  $('.button').click(function() {
    $('.overlay').css("display", "block");
    $('.button').css("display", "none");
  });

  $('#submitSearch').click(function() {
    $('.overlay').css("display", "none");
    $('.button').css("display", "block");
  });

});

html,body{margin:0;padding:0;}
.button,
.overlay input[type="submit"] {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat;
  height: 50px;
  width: 50px;
  position: absolute;
  top: 50px;
  right: 50px;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: rgba(200, 200, 200, 0.8);
  display: none;
}
.overlay input[type="text"] {
  position: absolute;
  top: 50px;
  left: 0;
  height: 50px;
  font-size: 30px;
  width: -webkit-calc(100vw - 100px);
  width: calc(100vw - 100px);
  outline: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid gray;
}

/*for demo only*/
.mainContent{
  margin-top:100px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button"></div>
<div class="overlay">
  <input type="text" placeholder="enter search and press icon again" id="searchString" />
  <input id="submitSearch" type="submit" value="" />
</div>

<div class="mainContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lobortis augue, vitae commodo ante. Cras mi odio, dictum non varius a, elementum quis lorem. Donec erat tellus, gravida a dui nec, ornare pulvinar felis. Pellentesque felis elit, venenatis eget rutrum nec, viverra id erat. Sed sit amet porta odio. Curabitur id elit at lectus convallis feugiat. Donec ac ullamcorper urna. Integer sagittis orci ante, non posuere est gravida vitae.

Fusce molestie tempus felis, id faucibus felis bibendum ut. Cras ut rutrum ipsum. Cras ut mi eros. Sed posuere tortor et dignissim varius. Donec viverra placerat nisi, quis laoreet tortor tempor a. Ut semper pretium nisi in porttitor. Aliquam mauris ipsum, lacinia a urna ut, rutrum auctor turpis. Suspendisse gravida leo nec eleifend luctus. Suspendisse vestibulum sem ut venenatis pretium. Quisque sagittis neque ut iaculis maximus. Aliquam ut aliquet turpis. Fusce eget odio sit amet mi porttitor facilisis eu eget augue.
  </div>

首先，使用按钮类上的定位来定位图标。

从那里，使用css隐藏.overlay类。然后，您可以使用JS切换overlay div的显示属性。

在.overlay父级内，已放置提交和输入（使用定位），并且提交按钮位于“旧”图标的顶部。当你按下这个“新图标”时，它会再次隐藏这个“弹出窗口”。

单击搜索图标时如何制作新选项卡

3 个答案: