自带默认的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. Drupal8 入门教程（一）安装部署

    一.Drupal简介 Drupal 是使用PHP语言编写的开源内容管理框架(CMF),它由内容管理系统(CMS)和PHP开发框架(Framework)共同构成.连续多年荣获全球最佳CMS大奖,是基于P ...

  2. 031、none和host网络的适用场景（2019-02-18 周一）

    参考https://www.cnblogs.com/CloudMan6/p/7053617.html   本节开始,会学习docker的几种原生网络,以及如何创建自定义网络.然后探究容器之间如何通信, ...

  3. window编译caffe总结

    最后发现用cmake_gui.exe安装最方便,加一个cudnn路径就行了,然后勾选选项就可以自动完成编译,很是方便 下面这个是命令行安装方法 1.参照官方命令行安装的方法 https://githu ...

  4. oracle 根据在线更新分区。

    LOG_PURCHASEINFO 是没有分区之前的表,根据 LOG_PURCHASEINFO_P 分区好的表在线更新 LOG_PURCHASEINFO表,让他变成分区表.11g才可以使用list_ra ...

  5. Docker 容器启动 查看容器状态 - 四

    1.容器两种方式进行启动 一种是基于创建一个容器并启动 docker create docker start 另一种 使用 run 创建自动启动:是状态下的停止 启动 docker start ngi ...

  6. 前端分辨pc和移动端导入不同css

    通过navigator获取浏览器,根据浏览器的不同判断出pc和移动端然后设置不同的css 分辨不同屏幕导入不同的css文件: function loadCSS() { if((navigator.us ...

  7. Python常用模块之time模块

    python中的time和datetime模块是时间方面的模块 time模块中时间表现的格式主要有三种: 1.timestamp:时间戳,时间戳表示的是从1970年1月1日00:00:00开始按秒计算 ...

  8. java Object类的公共方法

    1.HashCode();      2. wait();  3. notify(); 4.equals(); 5.getClass(); 6.toString(); 7.clone(); 8.fin ...

  9. 关于each other terminal

    LD_LIBRARY_PATH shouldn't contain the current directory I am trying to build a self-contain GLIBC 2. ...

  10. 🌵react小记 🌵