Einfügen eines Textfelds oben auf der Seite

Ich habe das schon lange probiert. Wie kann ich ein größeres Textfeld oben auf der Seite hinzufügen, dh es würde außerhalb des div-Tags der Schaltfläche sein, die angeklickt würde https://jsfiddle.net/Lx3rtLx0/2/ Zum Beispiel beim Klicken auf eines der vier entstehenden Bilder sollte es ein Textfeld angezeigt werden der obere Teil der Seite wie der unten gezeigteEinfügen eines Textfelds oben auf der Seite

Ich möchte, dass der angegebene Code auf der Seite beim Klicken auf eines der Bilder erscheint. I.e. Wenn Sie auf eines der Bilder (jsfiddle) klicken, erscheint ein Textfeld (Code). auf verschiedene Klicks diff-Inhalte.

#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; 
 
\t  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; 
 
    }

<!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>

Quelle

2016-06-15 lirus

Ist Anforderung einzufügen '' Element an der Spitze des Dokuments? – guest271314

was meinst du damit zu implizieren – lirus

Nicht sicher, was erwartetes Ergebnis ist? – guest271314

auf Ihre Frage nicht super klar, machen Sie eine Eingabe an die jsfiddle in Ihrer Frage hinzufügen müssen? oder der Code, den Sie in Ihrer Frage aufgelistet haben? Wenn es in der jsfiddle ist, fügen Sie einfach diese an die Spitze des Codes:

<body> 
     <section id="header"> 
     <div class="inner"> 
       <div> 
        <input type="text" style="position:absolute; width:300px;" /> 
       </div>

Andernfalls das Attribut position: absolute für Sie arbeiten sollten, wenn sie nicht an der richtigen Stelle ist, fügen Sie Attribute wie top:0; left:0, und das wird Ihre Eingabe in den oberen linken Bereich trotz allem anderen in Ihrem Code setzen.

Quelle

2016-06-15 00:23:11 Jaromjj

Ich möchte, dass der eingegebene Code auf der Seite erscheint, wenn ich auf eines der Bilder klicke ... dh wenn Sie auf eines der Bilder klicken (jsfiddle) ... sollte ein Textfeld (Code vorhanden) erscheinen ... auf different clicks diff Inhalt – lirus

Einfach, auf Ihrer Klick-Taste so fügen Sie den Code in 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);

So die volle JS werden

$(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); 
});

});

Quelle

2016-06-15 00:34:51 irimawi

wenn Sie denken, dass Label auf https: // jsfiddle aussehen.net/Lx3rtLx0/11/ – irimawi

Ich möchte es nicht auf das Hauptbild in der Mitte, sondern auf eines der 4 Bilder daraus – lirus

und brauchte die Phantasie-Box ich machte – lirus

Sie können ein data- Attribut auf Ihren anklickbaren divs verwenden, um sie mit einem bestimmten Element (in diesem Fall einem Textfeld) zu verknüpfen. Zum Beispiel:

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

Im Click-Handler, können wir dieses Attribut und zeigen das Element mit der ID adbox1 retreive.

Voll Beispiel:

$(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(); 
 
    }); 
 
});

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; 
 
}

<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>

Quelle

2016-06-15 00:56:27 Midas

Einfügen eines Textfelds oben auf der Seite

Antwort

Verwandte Themen