Wie können Eingabefelder beim Klicken auf Popover angezeigt werden?

Question

Ich brauche drei Eingabefelder mit Inhalt in Abb

Ich habe Bootstrap popover verwendet, wie gezeigt haben, um den Inhalt anzuzeigen, wie folgt

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus 
    sagittis lacus vel augue laoreet rutrum faucibus."> 
    Select your Room 
    </button> 

Ich bin nicht in der Lage die Boxen angezeigt werden wie im Dateninhalt gezeigt, oder sonst irgendeine alternative Lösung, die mein Problem löst, wäre hilfreich.

Answer 1

$(function() { 
 
    $('[data-toggle="popover"]').popover() 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-html="true" data-content='<button type="button" class="btn">Button 1</button><button type="button" class="btn">Button 2</button><button type="button" class="btn">Button 3</button>'>Select 
 
your Room 
 
</button>

Wenn Sie wollen einfach nur HTML-Inhalte auf die popover hinzuzufügen, setzen Sie nur das Attribut html="true" und einige HTML-Pass in der data-content.

In Ihrem Beispiel wäre es:

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-html="true" data-content='<button type="button" class="btn">Button 1</button><button type="button" class="btn">Button 2</button><button type="button" class="btn">Button 3</button>'> 
    Select your Room 
</button> 

Beispiel hier: https://jsfiddle.net/r37jf4qm/

Popover Optionen sind dokumentiert here.

Answer 2

Ich denke, das ist, was Sie suchen. Sie können das Styling immer ändern.

/** 
 
* CSS Toggle with no inputs 
 
*/ 
 
* { margin: 0; padding: 0; box-sizing: border-box;} 
 
html{ 
 
\t background: #f06; 
 
\t background: linear-gradient(45deg, #f06, yellow); 
 
\t min-height: 100%; 
 
\t font: 1.5em/1.13 Verdana, sans-serif; 
 
} 
 
.ctrl { 
 
\t position:absolute; 
 
\t top: 50%; left: 50%; 
 
\t transition: .5s; 
 
} 
 
.button, .tip a { 
 
\t display: block; 
 
\t opacity: .56; filter: alpha(opacity=56); /* For IE8 and earlier */ 
 
\t background: #c9c9c9; 
 
\t color: #7a8092; 
 
\t text-align: center; 
 
\t text-decoration: none; 
 
\t text-shadow: 0 -1px dimgrey; 
 
} 
 
.button:hover, .ctrl a:hover, .button:focus, .ctrl a:focus { opacity: 1; filter: alpha(opacity=100); /* For IE8 and earlier */} 
 
.button:focus, .ctrl a:focus { outline: none; } 
 
.button { 
 
\t z-index: 2; 
 
\t margin: -.625em; 
 
\t width: 1.25em; height: 1.25em; 
 
\t border-radius: 50%; 
 
\t box-shadow: 0 0 3px 1px white; 
 
} 
 
/* circular menu */ 
 
.tip { 
 
\t z-index: 1; 
 
\t /**outline: dotted 1px white;/**/ 
 
\t margin: -5em; 
 
\t width: 10em; height: 10em; 
 
\t transform: scale(.001); 
 
\t list-style: none; 
 
\t opacity: 0; 
 
} 
 
/* the ends of the menu */ 
 
.tip:before, .tip:after { 
 
\t position: absolute; 
 
\t top: 34.3%; 
 
\t width: .5em; height: 14%; 
 
\t opacity: .56; 
 
\t background: #c9c9c9; 
 
\t content: ''; 
 
} 
 
.tip:before { 
 
\t left: 5.4%; 
 
\t border-radius: .25em 0 0 .25em; 
 
\t box-shadow: -1px 0 1px dimgrey, inset 1px 0 1px white, inset -1px 0 1px grey, 
 
\t \t \t \t inset 0 1px 1px white, inset 0 -1px 1px white; 
 
\t transform: rotate(-75deg); 
 
} 
 
.tip:after { 
 
\t right: 5.4%; 
 
\t border-radius: 0 .25em .25em 0; 
 
\t box-shadow: 1px 0 1px dimgrey, inset -1px 0 1px white, inset 1px 0 1px grey, 
 
\t \t \t \t inset 0 1px 1px white, inset 0 -1px 1px white; 
 
\t transform: rotate(75deg); 
 
} 
 
/* make the menu appear on click */ 
 
.button:focus + .tip { 
 
\t transform: scale(1); 
 
\t opacity: 1; 
 
} 
 
/* slices of the circular menu */ 
 
.slice { 
 
\t overflow: hidden; 
 
\t position: absolute; 
 
\t /**outline: dotted 1px yellow;/**/ 
 
\t width: 50%; height: 50%; 
 
\t transform-origin: 100% 100%; 
 
} 
 
/* 
 
* rotate each slice at the right angle = (A/2)° + (k - (n+1)/2)*A° 
 
* where A is the angle of 1 slice (30° in this case) 
 
* k is the number of the slice (in {1,2,3,4,5} here) 
 
* and n is the number of slices (5 in this case) 
 
* formula works for odd number of slices (n odd) 
 
* for even number of slices (n even) the rotation angle is (k - n/2)*A° 
 
* 
 
* after rotating, skew on Y by 90°-A°; here A° = the angle for 1 slice = 30° 
 
*/ 
 
.slice:first-child { transform: rotate(-45deg) skewY(60deg); } 
 
.slice:nth-child(2) { transform: rotate(-15deg) skewY(60deg); } 
 
.slice:nth-child(3) { transform: rotate(15deg) skewY(60deg); } 
 
.slice:nth-child(4) { transform: rotate(45deg) skewY(60deg); } 
 
.slice:last-child { transform: rotate(75deg) skewY(60deg); } 
 
/* covers for the inner part of the links so there's no hover trigger between 
 
    star button & menu links; give them a red background to see them */ 
 
.slice:after { 
 
\t position: absolute; 
 
\t top: 32%; left: 32%; 
 
\t width: 136%; height: 136%; 
 
\t border-radius: 50%; 
 
\t /* "unskew" = skew by minus the same angle by which parent was skewed */ 
 
\t transform: skewY(-60deg); 
 
\t content: ''; 
 
} 
 
/* menu links */ 
 
.slice a { 
 
\t width: 200%; height: 200%; 
 
\t border-radius: 50%; 
 
\t box-shadow: 0 0 3px dimgrey, inset 0 0 4px white; 
 
\t /* "unskew" & rotate by -A°/2 */ 
 
\t transform: skewY(-60deg) rotate(-15deg); 
 
\t background: /* lateral separators */ 
 
\t \t \t linear-gradient(75deg, 
 
\t \t transparent 50%, grey 50%, transparent 54%) no-repeat 36.5% 0, 
 
\t \t \t linear-gradient(-75deg, 
 
\t \t transparent 50%, grey 50%, transparent 54%) no-repeat 63.5% 0, 
 
\t \t /* make sure inner part is transparent */ 
 
\t \t radial-gradient(rgba(127,127,127,0) 49%, 
 
\t \t \t \t \t rgba(255,255,255,.7) 51%, #c9c9c9 52%); 
 
\t background-size: 15% 15%, 15% 15%, cover; 
 
\t line-height: 1.4; 
 
} 
 
/* arrow for middle link */ 
 
.slice:nth-child(3) a:after { 
 
\t position: absolute; 
 
\t top: 13%; left: 50%; 
 
\t margin: -.25em; 
 
\t width: .5em; height: .5em; 
 
\t box-shadow: 2px 2px 2px white; 
 
\t transform: rotate(45deg); 
 
\t background: linear-gradient(-45deg, #c9c9c9 50%, transparent 50%); 
 
\t content: ''; 
 
}

<a class='button ctrl' href='#' tabindex='1'>★</a> 
 
<ul class='tip ctrl'> 
 
\t <li class='slice'><a href='#'>✦</a></li> 
 
\t <li class='slice'><a href='#'>✿</a></li> 
 
\t <li class='slice'><a href='#'>✵</a></li> 
 
\t <li class='slice'><a href='#'>✪</a></li> 
 
\t <li class='slice'><a href='#'>☀</a></li> 
 
</ul>

Kredit: https://codepen.io/vavik96