第 16 章 弹出框和警告框插件

学习要点:

1.弹出框
2.警告框

主讲教师:李炎恢

本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件。

一.弹出框
弹出框即点击一个元素弹出一个包含标题和内容的容器。
//基本用法

<button class="btn btn-lg btn-danger"
      type="button"
      data-toggle="popover"
      title="弹出框"
      data-content="这是一个弹出框插件">
      点击弹出/隐藏弹出框
</button>

//JavaScript 初始化

$(‘button‘).popover();

弹出框插件有很多属性来配置提示的显示,具体如下:

$(‘button‘).popover({
    container : ‘body‘,
    viewport : {
        selector : ‘#view‘,
        padding : 10,
    }
}); 

通过 JavaScript 执行的方法有四个。

//显示
$(‘button‘).popover(‘show‘);
//隐藏
$(‘button‘).popover(‘hide‘);
//反转显示和隐藏
$(‘button‘).popover(‘toggle‘);
//隐藏并销毁
$(‘button‘).popover(‘destroy‘);

Popover 插件中事件有两种。

//事件,其他雷同

$(‘button‘).on(‘show.bs.tab‘, function() {
    alert(‘调用 show 方法时触发!‘);
}); 

二.警告框
警告框即为点击小时的信息框。
//基本实例

<div class="alert alert-warning">
    <button class="close" type="button" data-dismiss="alert">
        <span>&times;</span>
    </button>
    <p>
        警告:您的浏览器不支持!
    </p>
</div>                                                                                                       

//添加淡入淡出效果

<div class="alert alert-warning fade in">

如果用 JavaScript,可以代替 data-dismiss="alert"
//JavaScript 方法

$(‘.close‘).on(‘click‘, function() {
    $(‘#alert‘).alert(‘close‘);
})

Alert 插件中事件有四种。

//事件,其他雷同

$(‘#alert‘).on(‘close.bs.alert‘, function() {
    alert(‘当 close 方法被触发时调用!‘);
}); 
时间: 2024-10-11 07:37:57

第 16 章 弹出框和警告框插件的相关文章

第二百四十六节,Bootstrap弹出框和警告框插件

Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器. 基本用法 注意:必须在js结合popover()方法使用 data-toggle="popover"弹出框事件绑定,写在触发弹出框的元素里,执行弹出框事件点击弹出或隐藏(Bootstrap)title=""设置弹出框标题,写在弹出框元素里,(Bootstrap)

点击删除时弹出是否删除提示框

点击删除时弹出是否删除提示框:在通常情况下,想要点击删除某一项的时候,一般会弹出一个框,以提示操作者是否真的要删除此项,这样可以免于出现误操作,比较人性化的一个举措,下面就简单介绍一下如何实现此效果.实例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.soft

键盘的出现于隐藏(解决键盘弹出时会覆盖文本框的问题,代码实现)

#import "ViewController.h" #import "UIView+FrameExtension.h" // 可以自己写,以后用着方便 #define kDeviceHeight [UIScreen mainScreen].bounds.size.height @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super v

php网页,想弹出对话框, 消息框 简单代码

php网页,想弹出对话框, 消息框 简单代码 <?php echo "<script language=\"JavaScript\">alert(\"OK\");history.back();</script>"; ?> 或者 <?php echo "<script language=\"JavaScript\">\r\n"; echo " a

6 下拉选择框、警告框、滚动条操作

下拉选择框.警告框.滚动条操作 1 下拉选择框选择 1.1 Select类 Select类是WebDriver为解决select标签定位诞生的,此类定位的是select标签 from selenium.webdriver.support.select import Select 1.2 select方法 1. select_by_index() 根据option索引来定位,从0开始 2. select_by_value() 根据option属性 value值来定位 3. select_by_vi

Bootstrap 弹出框和警告框插件

一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器. //基本用法 <button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="弹出框" data-content="这是一个弹出框插件"> 点击弹出/隐藏弹出框 </button>   <script type=&qu

loadrunner回放时弹出windows安全警告

在录制 https://www.baidu.com,回放时总是弹出安全警告. 处理方案:打开IE的internet选项-->隐私,设置成“接受所有Cookie”,如下图所示即可解决

jquery控件-实现自定义样式的弹出窗口和确认框(转)

[javascript] view plain copy (function () { $.MsgBox = { Alert: function (title, msg) { GenerateHtml("alert", title, msg); btnOk();  //alert只是弹出消息,因此没必要用到回调函数callback btnNo(); }, Confirm: function (title, msg, callback) { GenerateHtml("conf

phoenixframe自动化测试平台对div弹出框(如弹出的div登陆框)的处理

package org.phoenix.cases; import java.util.LinkedList; import org.phoenix.action.WebElementActionProxy; import org.phoenix.enums.LocatorType; import org.phoenix.model.CaseLogBean; import org.phoenix.model.UnitLogBean; /**  * div形式的弹出框的处理,如登陆  * @aut