在页面顶部插入一个文本框

时间：2016-06-15 00:12:58

标签： javascript html css

我一直在尝试这个很多时间。如何在页面顶部添加一个更大的文本框，即它将位于按钮的div标签之外，该按钮将被单击 https://jsfiddle.net/Lx3rtLx0/2/ 例如，当点击四个新出现的图像中的一个时，它应该显示 页面顶部的文本框如下所示

我希望给定的代码在单击其中一个图像时到达页面。即当你点击其中一个图像（jsfiddle）..应该出现一个文本框（给出的代码）。在不同的点击差异内容。

＆＃13;
＆＃13; 
#adbox {   
            width: 800px;   
            height: 150px;   
            border-width: 0;   
            border-color: red;  
            background-color:grey; 
        }   
        #adbox .adbox1 {   
            width: 200px;   
            height: 50px;   
            border-width: 0;   
            border-color: red;  
            float:left; 
            background-color:lightblue; 
	    margin:0px 0px 0px 300px;
            }   
        #adbox .adbox2 {   
            width: 200px;   
            height: 50px;   
            border-width: 0;   
            border-color: red;   
            float:right;
            background-color:red;
           margin:0px 60px 0px 0px;
    }   
    .clear{
         clear:both;
    }
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<title>BOX</title>
</head>
<body>
<div align=center><div id="adbox"> 
<h1><br> xyz sent you a hug</br></h1>
<div class="adbox1"> 
<br>Send a Hug Back</br>
</div> 
<div class="adbox2"> 
<br>Ack | Dis</br>
</div> 
<div class="clear"/>
</div></div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

您的问题不是很清楚，您是否需要在问题中为jsfiddle添加输入？或者您在问题中列出的代码？如果它在jsfiddle中，只需将其添加到代码的顶部：

top:0; left:0

否则，属性position：absolute应该适合你，如果它不在正确的位置，添加<p>Get your ${`{ID_TOKEN}`} here!</p> 之类的属性，这将把你的输入放在左上角，尽管你的其他内容代码。

答案 1 :(得分：0)

简单，在您的点击按钮上添加https://jsfiddle.net/Lx3rtLx0/6/

中的代码 
var input = document.createElement('input'); // if you want label just change inpput to label
input.type='text';
input.value = 'hugs or whatever';
document.body.insertBefore(input, document.body.firstChild);

所以完整的JS变成了

$(document).ready(function() {
  $(".trigger").click(function() {
    $(".menu").toggleClass("active"); 
    var input = document.createElement('input'); // if you want label just change inpput to label
    input.type='text';
    input.value = 'hugs or whatever';
    document.body.insertBefore(input, document.body.firstChild);
});

}）;

答案 2 :(得分：0)

您可以在可点击的div上使用data-属性将它们与特定元素（在本例中为文本框）相关联。例如：

<div class="btn btn-icon" title="Send a hug to Mohammed" data-adbox="adbox1">

在点击处理程序中，我们可以检索此属性并显示ID为adbox1的元素。

完整示例：

＆＃13;
＆＃13; 
$(document).ready(function() {
    $(".trigger").click(function() {
        $(".menu").toggleClass("active");
    });
    $(".btn.btn-icon").click(function() {
        $('.adbox').hide();
        $('#' + $(this).data('adbox')).show();
    });
    $('.adbox').click(function() {
        $(this).hide();
    });
});
＆＃13; 
html,
body {
    height: 100%;
    overflow: hidden;
}
.absolute-center,
.menu,
.menu .btn .fa,
.menu .btn.trigger .line {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.menu {
    width: 5em;
    height: 5em;
}
.menu .btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    z-index: -10;
    cursor: pointer;
    -webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
    transition: opacity 2s, z-index 1s, -webkit-transform 1s;
    transition: opacity 2s, z-index 1s, transform 1s;
    transition: opacity 2s, z-index 1s, transform 1s, -webkit-transform 1s;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.menu .btn.trigger {
    opacity: 1;
    z-index: 100;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    content: url("http://i.stack.imgur.com/Yse7Q.jpg");
}
.menu .btn.trigger:hover {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}
.menu .rotater {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.menu.active .btn-icon {
    opacity: 1;
    z-index: 50;
}
.rotater:nth-child(1) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.menu.active .rotater:nth-child(1) .btn-icon {
    -webkit-transform: translateY(-12em) rotate(45deg);
    transform: translateY(-12em) rotate(45deg);
    background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
    background-size: cover;
    align: top;
}
.rotater:nth-child(2) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.menu.active .rotater:nth-child(2) .btn-icon {
    -webkit-transform: translateY(-12em) rotate(-45deg);
    transform: translateY(-12em) rotate(-45deg);
    background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
    background-size: cover;
    align: top;
}
.rotater:nth-child(3) {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
.menu.active .rotater:nth-child(3) .btn-icon {
    -webkit-transform: translateY(-12em) rotate(-135deg);
    transform: translateY(-12em) rotate(-135deg);
    background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
    background-size: cover;
    align: top;
}
.rotater:nth-child(4) {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}
.menu.active .rotater:nth-child(4) .btn-icon {
    -webkit-transform: translateY(-12em) rotate(-225deg);
    transform: translateY(-12em) rotate(-225deg);
    background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
    background-size: cover;
    align: top;
}
.menu.active .rotater:nth-child(4) .btn-icon {
    -webkit-transform: translateY(-12em) rotate(-225deg);
    transform: translateY(-12em) rotate(-225deg);
    background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
    background-size: cover;
    align: top;
}
.text-box {
    text-align: center;
    z-index: 3;
    font-size: 18px;
    font-weight: 900;
    color: white;
    padding-top: 30px;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    /* Safari */
    transition: all 0.5s ease;
}
.text-box:hover {
    opacity: 1;
}
.adbox {
    display: none;
    position: absolute;
    top: 10px;
    width: 120px;
    left: 50%;
    margin-left: -70px;
    background: grey;
    padding: 10px;
    color: white;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section id="header">
    <div class="inner">
        <div class="menu">
            <div class="btn trigger">
                <span class="line"></span>
            </div>
            <div class="icons">
                <div class="rotater">
                    <div class="btn btn-icon" title="Send a hug to Mohammed" data-adbox="adbox1">
                        <p class="text-box">
                            Hello
                        </p>
                    </div>
                </div>
                <div class="rotater">
                    <div class="btn btn-icon" title="Send a kiss to Margaret" data-adbox="adbox2">
                        <p class="text-box">
                            This
                        </p>
                    </div>
                </div>
                <div class="rotater">
                    <div class="btn btn-icon" title="Wish Good Morning to your Family" data-adbox="adbox3">
                        <p class="text-box">
                            Doge
                        </p>
                    </div>
                </div>
                <div class="rotater">
                    <div class="btn btn-icon " title="Express your love" data-adbox="adbox4">
                        <p class="text-box">
                            Is
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="adbox" id="adbox1">
    <h1>xyz sent you a hug</h1>
</div>
<div class="adbox" id="adbox2">
    <h1>Send a Hug Back</h1>
</div>
<div class="adbox" id="adbox3">
    <h1>Ack | Dis</h1>
</div>
<div class="adbox" id="adbox4">
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题