自带默认的css和js弹框控制

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>modal</title>

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>

    <script type="text/javascript" src="bootstrap-4.0.0-dist/js/bootstrap.bundle.min.js"></script>

    <link rel="stylesheet" type="text/css" href="bootstrap-4.0.0-dist/css/bootstrap.min.css">

</head>

<body>

<!-- css自带弹窗处理 -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">

  弹窗1

</button>

<!-- Modal -->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="modal-body">

        ...

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

        <button type="button" class="btn btn-primary">Save changes</button>

      </div>

    </div>

  </div>

</div>

</body>

</html>

自己使用jquery控制弹窗

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>modal</title>

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>

    <script type="text/javascript" src="bootstrap-4.0.0-dist/js/bootstrap.bundle.min.js"></script>

    <link rel="stylesheet" type="text/css" href="bootstrap-4.0.0-dist/css/bootstrap.min.css">

</head>

<body>

<!-- css自带弹窗处理 -->

<!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">

  弹窗1

</button> -->

<!-- js控制弹窗 -->

<button id="myModal" class="btn btn-info">弹窗2</button>

<!-- Modal -->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="modal-body">

        ...

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

        <button type="button" class="btn btn-primary">Save changes</button>

      </div>

    </div>

  </div>

</div>

<script type="text/javascript">

    $('#myModal').on('click', function () {

      $('#exampleModal').modal('show');

    })

</script>

</body>

</html>

bootstrap4简单使用和入门02-bootstrap的js组件简单使用的更多相关文章

  1. 【Bootstrap基础学习】02 Bootstrap的布局组件应用示例

    字体图标的应用示例 <button type="button" class="btn btn-default"> <span class=&q ...

  2. JS组件系列——表格组件神器：bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  3. JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  4. JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  5. [转]JS组件系列——表格组件神器：bootstrap table

    原文地址:https://www.cnblogs.com/landeanfen/p/4976838.html 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉 ...

  6. JS组件系列——表格组件神器：bootstrap table 包含了js对象的定义和对象成员函数的定义

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  7. CSS3基础入门02

    CSS3 基础入门02 边框相关属性 border-radius 通过这个属性我们可以设置边框圆角,即可以将四个角设置为统一的圆角,也可以单独的设置具体的某一个角的圆角. grammer: borde ...

  8. Bootstrap入门（二十一）组件15：警告框

    Bootstrap入门(二十一)组件15:警告框 通过这些简单.灵活的进度条,为当前工作流程或动作提供实时反馈. 进度条组件使用了 CSS3 的 transition 和 animation 属性来完 ...

  9. Bootstrap入门（二十）组件14：警告框

    Bootstrap入门(二十)组件14:警告框 警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供反馈消息,提示.通知或者警示,可以迅速吸引注意力. 1.情景警告框 2.可关闭的警告框 3. ...

随机推荐

  1. mq【转】

    kafka解决了什么问题? mq的几个指标 1.消息堆积能力.两亿条1k大小消息体的消息发上来,积压一周不消费,机器哭不哭. 2.吞吐量.来个峰值,每秒两万,连续两小时,临时扩容扛不扛得住. 3.安全 ...

  2. initializer_list 列表初始化

    initializer_list 列表初始化 用花括号初始化器列表初始化一个对象,其中对应构造函数接受一个 std::initializer_list 参数. #include <iostrea ...

  3. Oracle和Mysql的安装

    Oracle12C的安装:https://blog.csdn.net/qubeleyz/article/details/79451192 Mysql安装:

  4. node的优缺点及应用场景

    Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎(V8引擎执行Javascript的速度非常快,性能非常好) 可以说node是运行在服务器端V8引擎上的Ja ...

  5. Servlet 起航 文件上传 中文文件名下载

    @WebServlet(name = "ticketServlet",urlPatterns = {"/tickets"},loadOnStartup = 1) ...

  6. Chrome实用技巧集锦

    1. 截取整个网页内容: 步骤:(F12 或 Ctrl Shift I 进入开发者模式)  ——>  Ctrl Shift P 弹出输入框  ——>  输入框中输入:Captrue ful ...

  7. Python中文显示问题&数据库连接传参

    1.Python连接mysql数据库,并且传递参数 con = MySQLdb.connect(host='***', user='root', passwd='***', db='***', por ...

  8. 传统javaweb 改成 Maven项目

    1. 项目右键-- Configure --Convert to Maven Project 后可以生成maven结构,多了红色框的    <project xmlns="http:/ ...

  9. Django之Bootstrap使用

    首先将bootstrap文件粘贴到static文件夹中,引入分为两部分,一是css文件引入,二是js文件引入. 1.css引入: <!DOCTYPE html> <html lang ...

  10. Templates<2>

    Part:template specialized Part1:template specialized #include <iostream> #include <stdio.h& ...