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>
关注公众号
一起努力
