前端基础之《Bootstrap（11）—JavaScript插件_模态框和下拉菜单》

一、模态框

1、模态框就是一个弹窗
.modal：模态框
.fade：淡入
.modal-dialog：对话框
.modal-content：对话框里面的内容
.modal-header：对话框头部
.modal-body：对话框体部
.modal-footer：对话框底部
data-dismiss属性：关闭指定目标

2、通过JavaScript调用modal
show：显示
hide：隐藏


<body>
	<div class="container">
        <h1 class="page-header">bootstrap前端框架h1>
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#mymodal">linuxbutton>
 
        <div id="mymodal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="close" data-dismiss="modal">×div>
                        <h3>linux技术文章h3>
                    div>
                    <div class="modal-body">
                        <h4>linuxh4>
                        <p>linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章p>
                    div>
                    <div class="modal-footer">
                        <button class="btn btn-primary save">savebutton>
                        <button class="btn btn-default" data-dismiss="modal">closebutton>
                    div>
                div>
            div>
        div>
    div>
body>
 
<script>
	$('.save').click(function(){
        alert("登录成功！");
        //把modal隐藏
        $('#mymodal').modal('hide');
    });
script>

3、事件
show.bs.modal：在打开modal之前
shown.bs.modal：modal打开了之后
hide.bs.modal：modal关闭前
hidden.bs.modal：modal关闭后


//模态框打开以后把背景调为蓝色
$('#mymodal').on('shown.bs.modal', function(e){
    $('body').css({'background':'#aaf'});
})
 
//模态框关闭以后把背景调为紫色
$('#mymodal').on('hiden.bs.modal', function(e){
    $('body').css({'background':'#faa'});
});

4、尺寸
modal-lg：大模态框
modal-sm：小模态框

二、下拉菜单

1、点击箭头出现下拉菜单效果

使用【data-toggle="dropdown"】样式效果实现：


<div class="dropdown">
    <button class="btn btn-default" data-toggle="dropdown">
        下拉菜单
        <span class="caret">span>
    button>
    <ul class="dropdown-menu">
        <li class="dropdown-menu-item">
            <a href="">linuxa>
        li>
        <li class="dropdown-menu-item">
            <a href="">linuxa>
        li>
        <li class="dropdown-menu-item">
            <a href="">linuxa>
        li>
        <li class="dropdown-menu-item">
            <a href="">linuxa>
        li>
    ul>
div>

相关阅读:
java计算机毕业设计校园临时用工网站MyBatis+系统+LW文档+源码+调试部署
【NLP的python库(02/4) 】：Spacy
分类预测 | Matlab实现SO-RF蛇群算法优化随机森林多输入分类预测
02：项目二：感应开关盖垃圾桶
net自动排课系统完整源码(适合智慧校园)
pytorch 入门（五）案例三：乳腺癌识别识别-VGG16实现
ESP32 MicroPython 蜂鸣器及传感器的使用⑦
C++学习笔记一（重载、类）
php跨域和https访问http问题分析
Python系列之：本地定时推送文件到指定服务器目录下

原文地址：https://blog.csdn.net/csj50/article/details/127792238