本节课我们主要学习一下 Bootstrap 中的模态框插件, 这是一款交互式网站非常常见的弹窗功能插件。
一.基本使用
使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层)、
dialog(窗口声明层)、content(内容层)。在内容层里面,还有三层,分别为 header(头部)、body(主体)、footer(注脚)。
//基本实例
如果想让模态框自动隐藏,然后通过点击按钮弹窗,那么需要做如下操作。
//模态框去掉 show,增加一个 id//点击触发模态框显示 //弹窗的大小有三种,默认情况下是正常,还有 lg(大)和 sm(小)//可设置淡入淡出效果//在主体部分使用栅格系统中的流体111Copy after login二.用法说明
基本使用介绍结束之后,我们就来看下插件的各种重要用法。所有的插件,都是基于JavaScript/jQuery 的。那么,就有四个要素:用法、参数、方法和事件。
1.用法
第一种:可以通过 data 属性//data-toggle data-toggle="modal" data-target="#myModal"Copy after logindata-toggle 表示触发类型
data-target 表示触发的节点如果不是使用
Previous article:50 个 jQuery 插件可将你的网站带到另外一个高度_jquery Next article:JS中使用apply、bind实现为函数或者类传入动态个数的参数_javascript技巧Statement of this WebsiteThe content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cnLatest Articles by Author
2024-08-17 17:27:02 2024-08-17 17:11:43 2024-08-17 17:11:31 2024-08-17 17:00:38 2024-08-17 17:00:07 2024-08-17 16:57:37 2024-08-17 16:54:31 2024-08-17 16:51:32 2024-08-17 16:50:55 2024-08-17 16:47:37Latest IssuesSteps to install jQuery in Nuxt.js Although I try to add jQuery in my project, I get an error saying it's not defined. plugin...From 2023-11-06 16:41:5001225Related TopicsMore>
What are the jquery plug-ins?
Introduction to the plug-ins required for vscode to run java
centos7 close firewall
How to solve the problem that wlan does not have a valid ip configuration
Solution to 0x84b10001
Can I retrieve a deleted Douyin short video?
What is the role of kafka consumer group
Ripple market today