自带默认的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. c++进阶学习

    以后可能要做c++开发了..记录要看的书和可能用的技术,让自己有个学习的方向... 1. 语言基础 2. 算法与数据结构基础 3. 多线程开发基础  4. 数据库  5. 网络编程 6. 内存数据库技 ...

  2. python 有趣的库练习

    这里会将看到别人玩过有趣的实践并记录下来,会是一个长期更新的过程... 以下大部分均非原创变化自网络,只是觉得有趣便记录下来了,如有侵权,请告知删除... 自动化脚本... 20个必不可少的Pytho ...

  3. js监听键盘事件

    用JS监听键盘按下事件(keydown event)   1.监听全局键盘按下事件,例如监听全局回车事件 1 $(document).keydown(function(event){ 2 if(eve ...

  4. mybatis字符串转义问题

    问题描述 @Select("select * from account order by #{orderBy} #{orderRule} limit #{start},#{offset}&q ...

  5. eventproxy 介绍这款好用的工具，前端事件式编程的思维

    前端事件式编程 <script src="eventproxy.js"></script> <script> // EventProxy此时是一 ...

  6. 【由浅入深理解java集合】(三)——集合 List

    第一篇文章中介绍了List集合的一些通用知识.本篇文章将集中介绍List集合相比Collection接口增加的一些重要功能以及List集合的两个重要子类ArrayList及LinkedList. 一. ...

  7. Tippy.js – 轻量的 Javascript Tooltip 工具库

    工具提示(Tooltip)在网站中的一个小功能,但却有很重要的作用,常用于显示一些温馨的提示信息.如果网站中的工具提示功能做得非常有创意的话能够加深用户对网站印象.Tippy.js 是一款帮助你快速创 ...

  8. 对XML文件进行的修改

    XmlDocument xml = new XmlDocument(); xml.Load(Way);//获取相对路径 var Exports = xml.GetElementsByTagName(& ...

  9. github 建立主页

    听同学介绍用github 建立自己的主页,做出来真是高大上.不行我也要学习学习 做一个只显示hello world 的主页哦 1. create repository(要和自己的github的user ...

  10. html5 area实例

    真实页面效果:就是一张图 html代码: <!DOCTYPE HTML> <html> <style> body{ padding:0px; margin:0px; ...