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>