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

    一、模态框

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

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

    1. <body>
    2. 	<div class="container">
    3.         <h1 class="page-header">bootstrap前端框架h1>
    4.         <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#mymodal">linuxbutton>
    5.  
    6.         <div id="mymodal" class="modal fade">
    7.             <div class="modal-dialog">
    8.                 <div class="modal-content">
    9.                     <div class="modal-header">
    10.                         <div class="close" data-dismiss="modal">×div>
    11.                         <h3>linux技术文章h3>
    12.                     div>
    13.                     <div class="modal-body">
    14.                         <h4>linuxh4>
    15.                         <p>linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章p>
    16.                     div>
    17.                     <div class="modal-footer">
    18.                         <button class="btn btn-primary save">savebutton>
    19.                         <button class="btn btn-default" data-dismiss="modal">closebutton>
    20.                     div>
    21.                 div>
    22.             div>
    23.         div>
    24.     div>
    25. body>
    26.  
    27. <script>
    28. 	$('.save').click(function(){
    29.         alert("登录成功！");
    30.         //把modal隐藏
    31.         $('#mymodal').modal('hide');
    32.     });
    33. script>

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

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

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

    二、下拉菜单

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

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

    1. <div class="dropdown">
    2.     <button class="btn btn-default" data-toggle="dropdown">
    3.         下拉菜单
    4.         <span class="caret">span>
    5.     button>
    6.     <ul class="dropdown-menu">
    7.         <li class="dropdown-menu-item">
    8.             <a href="">linuxa>
    9.         li>
    10.         <li class="dropdown-menu-item">
    11.             <a href="">linuxa>
    12.         li>
    13.         <li class="dropdown-menu-item">
    14.             <a href="">linuxa>
    15.         li>
    16.         <li class="dropdown-menu-item">
    17.             <a href="">linuxa>
    18.         li>
    19.     ul>
    20. div>

  • 相关阅读:
    LeetCode·84.柱状图中最大的矩形·单调递增栈
    gdb调试
    有关神经网络的训练算法,神经网络算法通俗解释
    hive排序
    channel 转移数据
    HTML视频背景(动态背景)
    04 【优化】
    Java 中经常被提到的 SPI 到底是什么？
    RT-Thread 项目工程搭建和配置--(Env Kconfig)
    命名空间的详讲
  • 原文地址：https://blog.csdn.net/csj50/article/details/127792238