引导教程JS插件弹出框学习笔记分享

本文主要研究JavaScript插件弹出框。

情况

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

我们先来看一些简单的静态案例渲染。

效果比较简单，主要是静态弹出的小表单，分为表单标题和表单内容。

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 ' FofD posuere consectetur est at lobortis。欧洲的利奥夸姆。前庭大腺炎。/p/div/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 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 div class=' pop over left ' div class=' arrow '/div H3 class=' pop over-title ' pop over left/H3 div class=' pop over-content ' FaceBook posuere consectetur est at lob ortis。欧洲的利奥夸姆。前庭大腺炎。/P/div/div class=' clear fix '/div/div但是我们仍然需要为元素设置一个简单的基本布局。

样式类型='text/css '。bs-示例-popover。popover {position:相对；display:块；向左浮动：宽度： 240 px；margin: 20px}/style动态演示。

先看效果图。

一个按钮，点击按钮会弹出右侧的小窗体。

看代码，其实很简单。

[code]a id=' a2 ' class=' BTN TN-lgb TN-danger ' data-placement=' right ' data-content='即以矮、胖、穷、丑、笨、呆等属性表现对令人震惊的人的各种行为和想法的蔑视。屌丝(或写“悬簧”)可以说是从“刁死”、“挂”、“刁死”等粗口词演变而来的。“屌丝人”主要是指他们大多来自贫困家庭，比如很多城市的农村或者低层次的市民家庭，没有更多的背景，很多初中停学，进城打工，或者在餐馆当服务员，或者成为网吧的网络经理，在城市的财富中分得一杯羹。或者一个宅男或者一个无业游民，但通常都不肯承认。个人一般称自己为自由职业者。" Title=' href=' # ' data-original-Title='屌丝原意'请点击切换弹出/a [code]。

只是一个a标签，但是给定了按钮的样式类，然后给定了几个属性，主要用来显示弹出框：

第一个：数据-原始-标题——标题。

第二：data-content——内容。

第三：数据放置——位置(上、下、左、右、上、下)。

但是，如果您现在运行它，按钮是可用的。如果您点按按钮，弹出框将不会出现。结果很简单，就是我们还没有初始化它，就像上一节的工具提示一样。

只需添加简单的JavaScript代码。

脚本类型='text/javascript'$('#a1 ')。Popo ver()；/脚本四个方向。

div style=' margin-left :200 px；margin-top :100 px；边距-底部：200 px；'class=' bs-示例工具提示-演示' div class=' bs-示例-工具提示' button type=' button ' class=' BTN BTN-default ' Data-container=' body ' Data-toggle=' popover ' Data-placement=' left ' Data-content=' vivamus sagittis lacsvel augue laoreet rut rum faucibus '左侧框架/button button type=' button ' class=' BTN BTN-default ' data-container=' body ' data-toggle=' Popo ver ' data-placement=' top ' data-content=' Vivas sagittis lacu Svel augue laoeret rut rum fau cibus '上框架/button button type=' button ' class=' BTN BTN-default ' data-container=' body ' data-toggle=' popover ' data-placement=' bottom ' data-content=' Vivamus sagittis l Acusvel augue laoeret rut rum faucibus '下部框架/button button type=' button ' class=' BTN BTN-default ' data-container=' body ' data-toggle=' popover ' data-placement=' right ' data-content=' Vivas sagittis la Cusvel augue laoreet rut rum faucbus '然后用JavaScript激活右边的框/按钮/div/div。

脚本类型='text/javascript'$('#a1 ')。Popo ver()；$('[data-toggle=popover]')。Popo ver()；/编写可选功能的脚本。

为了性能，工具提示和弹出组件的数据属性api是可选的，这意味着您必须自己初始化它们。

在按钮组和输入框组中使用弹出框时，需要额外的设置。

当提示框与。BTN-组或。input-group，您需要指定container: 'body '选项(请参见下面的文档)以避免不必要的副作用(例如，在弹出框显示后，与之协作的页面元素可能会变宽或变圆)。

在禁止的页面元素上使用弹出框时，您需要添加一个附加元素来包装它们。

将弹出框添加到禁用或。禁用的元素，将需要添加弹出框的页面元素包装在div中，然后将弹出框应用于该div元素。

使用通过JavaScript启用弹出框：

$('#example ')。popover(选项)

选择权

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

方法

$().popover(选项)

为一组元素初始化弹出框。

$('#element ')。popover('show ')

将显示一个弹出框。

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

隐藏弹出框。

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

或者隐藏弹出框。

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

并销毁弹出框。

事件

$('[data-toggle=popover]')。on(' showed . bs . Popo ver '，function(){ alert(1)；})

如果你还想深入学习，可以点击这里学习，然后为你附上3个精彩话题：

引导教程。

自举实用教程。

引导插件教程。

以上就是本文的全部内容，希望对大家学习javascript编程有所帮助。