図ポップオーバーをクリックしている間に入力ボックスを表示する方法は？
に示すように、私は私はボックスを表示することができません、次のようにコンテンツを表示する
<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>
をブートストラップポップオーバーを使用してきた内容と3つの入力ボックスを持っている必要がデータ内容の中に示されているように、そうでなければ私の問題を解決する代替解決策が役に立つでしょう。
$(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>data-content。あなたの例では
は、それは次のようになります。ここ
<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>
例：https://jsfiddle.net/r37jf4qm/
ポップオーバーのオプションはhereを文書化されています。
私はこれがあなたが探しているものだと思います。いつでもスタイリングを変更できます。
/**
* 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>クレジット：あなたは、単にポップオーバーにHTMLコンテンツを追加したい場合は、単に属性html="true"を設定し、いくつかのHTMLを渡すhttps://codepen.io/vavik96
私は添付した画像のように正確に同じものを必要とします。 –
うまく動作しません。うまくいきなりフィドルを作ります。 –
ここに行きます：https://jsfiddle.net/r37jf4qm/ – Benno