JS组件Bootstrap实现弹出效果代码

给页面内容添加一个小覆盖，就像iPad上的效果一样，给页面元素添加额外的信息。

插件依赖弹出依赖工具提示插件，所以需要先加载工具提示插件。可选特性是出于性能原因，工具提示和弹出组件的数据属性api是可选的，这意味着您必须自己初始化它们。当在按钮组和输入框组中使用弹出框时，需要额外的设置。当提示框与。BTN-组或。input-group，您需要指定container: 'body '选项(请参见下面的文档)以避免不必要的副作用(例如，当显示弹出框时，与之协作的页面元素可能会变宽或变圆)。在禁止的页面元素上使用弹出框时，您需要添加一个附加元素来包装它们。将弹出框添加到禁用或。禁用的元素，将需要添加弹出框的页面元素包装在div中，然后将弹出框应用于该div元素。1.静态情况下有四个可选选项：顶部、右侧、底部和左侧排列。

代码段。bs-示例{ border-color : # DDD；border-radius :4 px 4px 0 0；边框宽度：1 px；box-shadow : none；左边距：0；右边距：0；border-style : solid；} .bs-示例-popover。popover { position:相对；display:块；向左浮动：宽度： 240 px；margin: 20px} h1 class='page-header'3。popup box/h1 div class=' bs-example bs-example-pop over ' div class=' pop over top ' div class=' arrow '/div H3 class=' pop over-title ' pop over top/H3 div class=' pop over-content ' FueD posuere consecte tur est at lobortis。欧洲的利奥夸姆。前庭大腺炎。/p/div/div class=' pop over right ' div class=' arrow '/div H3 class=' pop over-title ' pop over right/H3 div class=' pop over-content ' FaceBook posuere consectetur est at lob ortis。欧洲的利奥夸姆。前庭大腺炎。/p/div/div class=' pop over bottom ' div class=' arrow '/div H3 class=' pop over-title ' pop over bottom/H3 div class=' pop over-content ' FaceBook posuere consectetur est at lob ortis。欧洲的利奥夸姆。前庭大腺炎。/p/div/div class=' popover left ' div class=' arrow '/div H3 class=' popover-title ' popover left/H3 div class=' popover-content '伪姿势概念测试在lobortis。埃涅欧里奥夸姆。这是一个很好的例子。/p/div/div/div预览效果。

代码片段：

a href=' JavaScript : void(0)Id=' a _ pop ' class=' btnbtn-dancer ' data-placement=' bottom ' data-content='风雨花时间追白马。你还坚持着你年轻手掌里的梦话吗？云涌成夏泪被岁月蒸发。你我和她有谁在这条路上迷路了吗？我们同意一直呆在一起。即使你与时间为敌，即使你与世界为敌，即使你偏离了风，阳光和雪，让我们的头发变白，你还记得那一年吗？盛夏，我们渴望无限，我们手牵手跨过悲伤的河。你曾经说过，我们应该永远在一起，不要分开。现在，我想问你，你是不是只是单纯，单纯，无法欺负青春，荒唐，我就不承受你的大雪。请不要抹去我们在一起的痕迹。大雪不能。抹去彼此身上的印记。今天晚上，草会离月夜千里，以此类推。从明年的秋风开始，‘数据-原始-标题=‘煮雨时间’，点击Load /a strongjs初始化：/strong脚本类型=‘text/JavaScript’$(“# a _ pop”)。Popo ver()；/脚本预览效果：

注意，当指定放置时，要特别注意方向。因为弹出框在触发事件元素的中心开始弹出，所以很可能会被覆盖，无法完全显示。

代码中标记的href属性必须指定为javascript:void(0)才能移除链接效果。

四个方向：

密码

a href=' JavaScript : void(0)Id=' a _ pop 1 ' class=' btnbtn-dancer ' data-placement=' left ' data-content='风雨花时间追白马。你还坚持着你年轻手掌里的梦话吗？云涌成夏泪被岁月蒸发。你，我和她在这条路上迷路了吗？数据-原始-标题='煮雨时间'左/a href=' JavaScript 3360 void(0)。id=' a _ pop 2 ' class=' btnbtn-dancer ' data-placement=' top ' data-content='我们约定一直在一起，即使我们与时间为敌，即使我们远离这个世界，风也会照耀，雪也会吹白。我们的头发说我们将一起走向世界。你还记得“数据来源”吗？al-tit='煮雨的时间'上半部分/a href=' JavaScript : void(0)。id=' a _ pop 3 ' class=' btnbtn-dancer ' data-placement=' bottom ' data-content='在那一年的盛夏，我们许下了无限的愿望，我们携手跨过了悲伤的河流。你曾经说过，我们应该永远在一起，不要分开。现在我想问你是不是在胡说八道。Ginal-title='时间煮雨'下半部分/a href=' JavaScript : void(0)。id=' a _ pop 4 ' class=' btnbtn-dancer ' data-placement=' right ' data-content='天真岁月不忍欺骗青春。我不会忍受你的大雪。请不要抹去我们在一起的痕迹。大雪无法抹去我们给彼此留下的痕迹。今天晚上，草离月夜千里，等等。从右侧的“data-original-title=‘时间煮雨’/a/div脚本类型=‘text/JavaScript’$(‘# a _ pop 1’)。Popo ver()；$('#a_pop2 ')。Popo ver()；$('#a_pop3 ')。Popo ver()；$('#a_pop4 ')。Popo ver()；/脚本预览效果；

其次，该选项可以通过数据属性或JavaScript传递。对于数据属性，您需要将选项名称放在data-之后，例如，data-animation=' '。

将数据属性应用于单个弹出框您可以通过数据属性为单个弹出框单独指定选项，如上所示。

第三，方法$()。弹出菜单(选项)。

为一组元素初始化弹出框。popover('show ')

将显示一个弹出框。

$('#element ')。popover('show ')。popover(“隐藏”)

隐藏弹出框。

$('#element ')。popover('hide ')。弹出(“切换”)

或者隐藏弹出框。

$('#element ')。popover(“切换”)。popover(“销毁”)

并销毁弹出框。

$('#element ')。popover(“销毁”)

四.事件。

$ ('# mypopover ')。on ('hidden.bs.popover '，function(){//做点什么…})如果你还想深入学习，可以点击这里学习，然后为你附上3个精彩话题：

引导教程。

自举实用教程。

引导插件教程。

以上就是本文的全部内容，希望对大家学习和掌握Bootstrap弹出框有所帮助。