当前位置:   article > 正文

bootstrap如何点击按钮出弹框_bootstrap点击确定后弹出成功的框

bootstrap点击确定后弹出成功的框

在百度没有找到什么很合适的教程(主要是因为不会JSP,JQ)


其实使用起来很简单,只需要大概三步


第一步:

加入<script>$('#myModal1').modal(show)</script>

这段代码,才能有效


第二布:

对于你要使用的按钮

修改它的代码

<button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#myModal1" data-backdrop="static">
              <i class="glyphicon glyphicon-repeat"></i>修改 </button>

这里有一个是  data-backdrop="static"  这句话的意义在于当你点击按钮除了弹框,点击空白的地方都会关闭弹窗,而加上之后只有有了关闭才会关闭。


第三部:

就是写你弹窗的内容

<!--详情按钮的弹出框 -->
  <div class="modal fade" id="myModal2">
              <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">课程详情</h4>
              </div>
              <div class="modal-body">
              <ul class="list-unstyled">
              <li><strong>课程编码:</strong>RGB215</li>
    <li><br></li>
    <li><strong>课程名称:</strong>数据库</li>
    <li><br></li>
    <li><strong>课时名称:</strong>数据库的种类</li>
    <li><br></li>
    <li><strong>上课时间:</strong>20170725</li>
    <li><br></li>
    <li><strong>课时简介:</strong>数据库的历史及发展</li>
    </ul>
              </div>
              <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              </div>
              </div>
              </div>
  </div>


格式可能有点乱,但是能使用,主要的是id要注意保持一致


这是我做出来的效果,当然不是最好的,其他方法暂时不清楚。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/blog/article/detail/80907
推荐阅读

  • bootstrap中的data-toggle=""这个明面上的意思是数据切换,下面我举一个例子可能更加的明白一些。Tab1在这段代码中,data-toggle="tab"将属性转换成了tab属性_data-toggle="tabdata-t... [详细]

  • bootstraptab选项卡_bootstarp选项卡bootstarp选项卡<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title... [详细]

  • HTML5新属性data-toggledata-toggle指:以什么事件触发(常用的如modal,dropdown,tooltips等)。data-targetdata-target指:事件的目标。_bootstrapdata-toggl... [详细]

  • 向元素中添加role="navigation",有助于增加可访问性。向<div>元素添加一个标题class.navbar-header,内部包含了带有classnavbar-brand的<a>元素。这会让文本看起来更... [详细]

  • data-toggle="modal"data-target=".update-Dialog">... [详细]

  • 今天在写代码的时候很心塞,之前也经常用这个,然而今天因为疏忽一直无法正常跳转,真的是写代码一点都不能大意啊!html代码:[详细]

  • 检查依赖引用顺序,应该是:jquery.js、bootstrap.css、bootstrap.js如果是Bootstrap5,请改用data-bs-toggle!_引用bootstrap没有data-toggle属性引用bootstrap没... [详细]

  • HowTO-ToggleSwitchSmallcustomtogglemodifierclass#25bootstrap-toggleGithub官网BootstrapToggleBootstrap4SwitchesBootstrapSwi... [详细]

  • 前提是要引入bootstrap.min.js1.先定义一个按钮data-toggle:以什么事件触发,如modal,popover,tooltips等;data-target事件的目标;data-t... [详细]

  • 关闭提示框:我们可以在提示框中的div中添加.alert-dismissible类,然后在关闭按钮的链接上(buttontype=“button”)添加class=“btn-close”和data-bs-dismiss=“alert”类来设... [详细]

  • 当您想要描述一个链接的时候,提示工具Tooltip)就显得非常有用。提示工具Tooltip)插件是受JasonFrame写的jQuery.tipsy的启发。提示工具Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用CSS实... [详细]

  • 一、BootstrapTable相关整理基于Bootstrap的jQuery表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。1.官网地址:http://bootstrap-table... [详细]

  • 目录一、Bootstrap简介什么是Bootstrap?历史为什么使用BootstrapBootstrap包的内容在线实例Bootstrap实例更多实例Bootstrap实例2二、Bootstrap环境安装下载Bootstrap文件结构预... [详细]

  • 网站通过对网上最新的热点影片的分门别类,采取简洁、直观的方式让观看者体验到前所未有的舒适感,通过对网站界面布局,信息采集,会员管理,观看者的互动等功能的规划来实现崭新的视听环境。本网站提供的电影资源和内容完全抓取自豆瓣,对来自豆瓣的数据进... [详细]

  • 第一部分:  关于bootstrapmodal使用,下面把几种自己用打开方法展示出来  首先呢,得有个Bootstrap页面,这里就不说了。  其次呢,得有个modal放在页面中,不管你这段代码加在页面代码什么地方,默认是不会显示... [详细]

  • 整理自慕课笔记插件的源文件:modal.js。在Bootstrap框架中把模态弹出框统一称为Modal。这种弹出框效果在大多数Web网站的交互中都可见。比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作,也有可能弹出... [详细]

  • bootstrap-modal译为模态对话框,也就是带遮罩层的对话框。从它的源码实现来看有点罗索。它的HTML结构分三分部,首部,内容区,底层,底部放按钮或分页栏。<divclass="modalhidefade"><di... [详细]

  • 相关标签
      

    闽ICP备14008679号