bootstrap jquery alert_bootstrap第七课

bootstrap 模态框

bootstrap是一个非常酷的前端开发框架，它可以大大的简化我们日常开发当中的功能与样式。它有非常漂亮的css组件和非常实用的控件供我们使用。接下来我们来看看bootstrap的内容吧！

首先大家要引入bootstrap的css和js

可以在这里下载：https://v3.bootcss.com/getting-started/

下载下来引入页面即可。(注意要引入jQuery 因为Bootstrap 的所有 JavaScript 插件都依赖 jQuery)

bootstrap的模态框就是当我们点击按钮时会弹出来一个父窗体，里面可以有确定、取消等交互内容。

直接上代码：

html><html lang="zh-CN">    <head>        <meta charset="utf-8">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>bootstrap模态框title>        <link rel="stylesheet" href="css/bootstrap.min.css">         <style type="text/css">.main {width: 100%;padding: 10px;            }.container {width: 100%;            }style>    head>    <body>        <div class="main">.            <div class="container">                <div class="row">

                    <div class="panel panel-success">                        <div class="panel-heading">                            模态框演示                        div>                        <div class="panel-body">                            <div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">

                                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#loveTalkModel">土味情话？button>                            div>                        div>                    div>                div>            div>        div>

        <div class="modal fade" id="loveTalkModel" tabindex="-1" role="dialog" aria-labelledby="loveTalkModelLabel" aria-hidden="true">            <div class="modal-dialog">                <div class="modal-content">                    <div class="modal-header">                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">                            ×                        button>                        <h4 class="modal-title" id="loveTalkModelLabel">                            土味情话？                         h4>                    div>                    <div class="modal-body">                        你上辈子一定是碳酸饮料吧，为什么我一看到你就能开心的冒泡？                    div>                    <div class="modal-footer">                         <button type="button" class="btn btn-default" data-dismiss="modal">取消                        button>                        <button type="button" id="submitTo" class="btn btn-primary">                            确定                        button>                    div>                div>            div>        div>         <script src="js/jquery-3.3.1.min.js">script>         <script src="js/bootstrap.min.js">script>         <script type="text/javascript">            $("#submitTo").click(function(){                alert("爱你哦!");                $("#loveTalkModel").modal("hide");            })script>    body>html>

效果：

▼ 更多精彩推荐，请关注我们 ▼

关注公众号

一起努力

bootstrap jquery alert_bootstrap第七课相关推荐

第七课技术小白如何开发一个DAPP区块链应用(以宠物商店为例)
1. 文章摘要 [本文目标] 通过逐步的指导和截图举证,一步步带领一个技术小白完成一个宠物商店DAPP应用的开发和部署. [环境前置条件] 参考<第一课如何在WINDOWS环境下搭建以太坊开发 ...
第七课.简单的图像分类(一)
第七课目录图像分类基础卷积神经网络 Pooling layer BatchNormalization BatchNormalization与归一化 torch.nn.BatchNorm2d MNI ...
C#之windows桌面软件第七课：（下集）串口工具实现数据校验、用灯反应设备状态
C#之windows桌面软件第七课:(下集)串口工具实现数据校验.用灯反应设备状态 using System; using System.Collections.Generic; using Syst ...
Coursera公开课笔记: 斯坦福大学机器学习第七课“正则化(Regularization)”
Coursera公开课笔记: 斯坦福大学机器学习第七课"正则化(Regularization)" +13投票斯坦福大学机器学习第七课"正则化"学习笔记, ...
《幸福就在你身边》第七课、工作着，快乐着【哈佛大学幸福课精华】
一.开心工作愚人向远方寻找快乐,智者则在身旁培养快乐. 泰戈尔在<人生的亲证>中写道:"我们的工作日不是我们的欢乐日--因此,我们要求节日,我们在自己的工作中不能找到节日,所以 ...
Asp.Net Web API 2第七课——Web API异常处理
Asp.Net Web API 2第七课--Web API异常处理原文:Asp.Net Web API 2第七课--Web API异常处理前言阅读本文之前,您也可以到Asp.Net Web AP ...
投资学习网课笔记(part7)--基金第七课
学习笔记,仅供参考文章目录基金第七课宽基指数和行业指数市值加权型和策略加权型常见的市值加权型指数常见的策略加权型指数中证系列指数基金创业板指数基金红利类指数基金基本面类指数基金价 ...
Linux就应该这么学第七课-文件的特殊权限
Linux就应该这么学第七课文件的特殊权限 1.SUID 将文件执行者临时获取所有者的权限 u+s 2.SGID 让执行者临时拥有属组的权限 g+s 在某个目录中创建的文件自动继承该目录的用户组(只 ...
bootstrap html5 表单验证,基于Bootstrap+jQuery.validate实现表单验证
这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤 ...

bootstrap jquery alert_bootstrap第七课

bootstrap jquery alert_bootstrap第七课相关推荐

最新文章

热门文章