javascript - Bootstrap : Creating Multiple Popovers with Button click

Question

有没有一种方法可以通过单击按钮来创建多个弹出窗口？基本上，我想要完成的是当按下“显示提示”时在不同部分中创建弹出提示。 (即按“显示提示”时，输入框会出现一个弹出窗口，图片上会出现另一个弹出窗口)这就是我到目前为止所拥有的，但我无法弄清楚如何创建多个弹出窗口。

创建焦点元素的奖励积分(即提示弹出框和元素突出显示，背景变暗)

http://jsfiddle.net/jzhang172/dzbuvdku/

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

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

.wrapper{
	height:1000px;
	width:700px;

background:#E9EAED;
float:left;
padding:10px 10px 0px 10px;

}

.top-container{
padding-top:10px;
padding-right:10px;
padding-left:10px;
height:170px;
width:100%;
background:white;
border-radius:3px;
border:1px solid #B3B6B5;
position:relative;

}

.input-lg{
height:60px;
border-radius:3px;
border:gray 1px solid;
}

/* --------------------------------------------Features */
.features{
	position:absolute;
	bottom:0;
}
.features > button{
	text-align:center;
	background:white;
	border:none;
	overflow:hidden;
}
.features >button>img{
	
}
.features> button.closer{

}
img:hover{
background:#EAE6E6;
transition: 0.3s ease;
}

/* --------------------------------------------Second Container */
.second-container{
	width:100%;
	background:white;

	margin-top:20px;
	border-radius:3px;
border:1px solid #B3B6B5;

}

.postinfo{
	display:inline;
}
img.person{
	float:left;
	margin:10px;
}
.postinfo >h4{
	margin-bottom:0px;
}
.postinfo>h6{
	margin-top:0px;
}

img.ramen{
	width:100%;
}

/* --------------------------------------------New User */
.newuser{
	height:30px;
}

/* --------------------------------------------Show Tips */
.newuser{
	margin-bottom:10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container wrapper">
		<!-- =========Section: Show Tips?=========== -->
		<div class="newuser">
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
Show Tips
</button>

		</div>
		<!-- =========Section: Top Container=========== -->
		<div class="top-container">
			<input type="email" class="form-control input-lg" id="exampleInputEmail1" placeholder="Say something...To tag people to this post, just type their @username">
			<div class="features">
				<button><img src="img/photo.gif" alt="Photo" class="img-rounded"></button>
				<button class="closer"><img src="img/video.gif" alt="Video" class="img-rounded"></button>
			</div>
		</div>
		<!-- =========Section: Second Container=========== -->
		<div class="second-container">
			<img src="img/person.png" alt="" class="person">
			<div class="postinfo">
				<h4><b>Name Surname</b></h4>
				<h6>Today at 11:56</h6>
				<span>This is a description.  This is a description.  This !s a description.</span>
				<img src="img/ramen.jpg" alt="" class="ramen">
			</div>


		</div>


	</div><!-- =========End: Containing Wrapper=========== -->

http://getbootstrap.com/javascript/#popovers这是一个弹出窗口

Answer 1

可能的解决方案:

• 为要显示弹出窗口的所有控件添加数据切换、数据触发和 Bootstrap 中提到的其他必要属性
• 添加一个类，假设您要在其中显示弹出窗口的所有控件都为“tip-container”
• 最后，在按钮的点击事件期间切换“tip-container”对象上的弹出框

http://jsfiddle.net/dzbuvdku/3/

<input type="email" class="form-control input-lg tip-container" id="exampleInputEmail1" placeholder="Say something...To tag people to this post, just type their @username" data-toggle="popover" data-trigger="manual" title="Dismissible popover" data-content="Some tip 1" data-placement="bottom">
            <div class="features">
                <button><img src="img/photo.gif" alt="Photo" class="img-rounded tip-container" data-toggle="popover" data-trigger="manual" title="Dismissible popover" data-content="Some tip 2" data-placement="bottom"></button>
                <button class="closer"><img src="img/video.gif" alt="Video" class="img-rounded"></button>
            </div>

JS

$('#ShowTipsBtn').on('click', function()
{    
    $('.tip-container').popover('toggle');    
});

如果您想在切换期间更改按钮文本，这里有一个选项:

$('#ShowTipsBtn').on('click', function()
{    
    if ($(this).text() == "Show Tips")
    {
        $('.tip-container').popover('show');
        $(this).text('Hide Tips');
    }
    else
    {
        $('.tip-container').popover('destroy');
        $(this).text('Show Tips');
    }
});