bootstrap弹出框个人demo

*bootstrap官方说明：http://v3.bootcss.com/javascript/#popovers
关于bootstrap的弹出框，其实官方文档说明的比较全的了，只是缺少一些demo，刚好，最近一个项目用到了它，顺带整理下。

一、popover

popover，取决于两个要素，第一个是带有[data-toggle='自定义名字']的发射器，这个需要手动初始化$("[data-toggle='自定义名字']").popover()；第二个是title值或content的值，在bootstrap初始化后，如果该值为空，则默认会display:none;

二、popover的实现方式

popover的实现，有两种，一种是内嵌式，即在相应的DOM元素里面增加相应的classname,这个在官方文档有好多案例；另外一种就是在JS里面重新定义里面的option，这部分官方只给了一个相应的文档，但是没具体的案例。另外，当页面里既有内嵌和JS定义两种写法的，bootstrap会默认获取内嵌式的内容

三、popover常用配置

var QIU={
ConnectLabel: function() {
$('#fivestep [data-toggle="changemark"]').each(function() {//初始化带有[data-toggle='自定义名字']的发射器
var element=$(this);
element.popover({
trigger:'manual',//触发方式，manual为自定义
placement:'top',//弹出框出现方式
title:"",//标题
html:'true',//默认为false，为true的话，data-title和data-content里就能放html代码了
container:$(".text"),//定义弹出框容器（popover会在该容器下创建）
content:'<div class="popover-box"><p><span data-field="a">连读</span><span>失爆</span><span>j</span></p>'+'<p><span>叠合</span><span>击穿</span><span>w</span></p>'+'</div>'//可以直接字符串拼接，可以放在function里面返回
})
element.off().on("click",function() {//自定义弹出方式，trigger=manual使用；
$("[data-toggle='showstress']").popover("hide");
$("[data-toggle='changemark']").not(element).popover("hide");
$(this).popover("toggle");
});
});
}
}

实现效果：

四、bootstrap部分源码解析

+function ($) {
'use strict';

// POPOVER PUBLIC CLASS DEFINITION
  // ===============================

var Popover = function (element, options) {
this.init('popover', element, options)
  }

if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js')

Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
placement: 'right',
trigger: 'click',
content: '',
template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
})


// NOTE: POPOVER EXTENDS tooltip.js
  // ================================

Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype)

Popover.prototype.constructor = Popover

  Popover.prototype.getDefaults = function () {
return Popover.DEFAULTS
}

Popover.prototype.setContent = function () {
var $tip    = this.tip()//获得模板内容（自定义）
var title   = this.getTitle()//获得标题
var content = this.getContent()//获得正文

$tip.find('.popover-title')[this.options.html ? 'html' : 'text'](title)//给titile赋值
$tip.find('.popover-content')[ // we use append for html objects to maintain js events
this.options.html ? (typeof content == 'string' ? 'html' : 'append') : 'text'
](content)//给content赋值


$tip.removeClass('fade top bottom left right in')

// IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
    // this manually by checking the contents.
if (!$tip.find('.popover-title').html()) $tip.find('.popover-title').hide()//假如没有标题，隐藏
  }

Popover.prototype.hasContent = function () {
return this.getTitle() || this.getContent()
  }

Popover.prototype.getContent = function () {
var $e = this.$element
var o  = this.options

return $e.attr('data-content')
|| (typeof o.content == 'function' ?
o.content.call($e[0]) :
o.content)
  }

Popover.prototype.arrow = function () {//获取弹框小箭头
return this.$arrow = this.$arrow || this.tip().find('.arrow')
  }

Popover.prototype.tip = function () {
if (!this.$tip) this.$tip = $(this.options.template)
return this.$tip
}


// POPOVER PLUGIN DEFINITION
  // =========================

var old = $.fn.popover

$.fn.popover = function (option) {
return this.each(function () {
var $this   = $(this)
var data    = $this.data('bs.popover')
var options = typeof option == 'object' && option

if (!data && option == 'destroy') return
      if (!data) $this.data('bs.popover', (data = new Popover(this, options)))
if (typeof option == 'string') data[option]()
    })
  }

  $.fn.popover.Constructor = Popover


// POPOVER NO CONFLICT
  // ===================

$.fn.popover.noConflict = function () {
    $.fn.popover = old
return this
}

}(jQuery);

五、注意事项

1、需手动初始化popover，即初始化ConnectLabel方法；
2、弹出框有默认最大宽度275px,bootstrap.min.css；

以上为本人总结的内容，有什么不足或者不好的，请见谅。我也会多看看别人的文档，多跟别人学习。