bootstrap3自定义popover显示的内容

自定义Popover示例

最新推荐文章于 2025-05-24 16:14:59 发布

原创最新推荐文章于 2025-05-24 16:14:59 发布 · 732 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

html/javascript/ajax/jquery/kendo/easyui/bootstrap 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一个使用Bootstrap和jQuery实现的Popover示例，通过自定义HTML内容和触发方式，展示了如何创建一个包含表单的Popover，并设置了可消失的特性。

<script type="text/javascript">
       		$(function () {
			  $('[data-toggle="tooltip"]').tooltip()
			})
			$(function () {
			  $('[data-toggle="popover"]').popover()
			})
			
			$(document).ready(function () {
				//自定义popover显示的内容
			   $('#mypopover').popover({ 
					html : true,
					title: function() {
					  return $("#popover-head").html();
					},
					content: function() {
					  return $("#popover-content").html();
					}
				});
			  
			});
			
</script>

<div class="row">
                <div class="col-xs-12 text-center">
                     <button id="mypopover" type="button" class="btn btn-default" data-container="body"  data-placement="bottom" >Popover on 右侧
                    </button>
                    
                    <div id="popover-head" class="hide">some title</div>
                    <div id="popover-content" class="hide">
                      <form>
                        there is form
		      </form>
                    </div>
                    <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">可消失的弹出框</a>
                 </div>
</div>