首页 > 其他分享 >bootstrap实现弹出窗口

bootstrap实现弹出窗口

时间:2023-04-06 15:44:50浏览次数:46  
标签:function 窗口 登录 对话框 实现 bootstrap loginModalId modal

bootstrap实现弹出窗口

 

bootstrap使用modal-dialog实现弹对话框。

一个对话框包含3部分:

对话框头部 modal-header

对话框内容体 modal-body

对话框底部 modal-footer

如下html可以放入<body>标签的任何位置,我习惯紧随<body>标签之后。

html代码片段:

  1. <div class="modal fade" id="loginModalId" tabindex="-1" role="dialog" aria-hidden="true">
  2. <div class="modal-dialog">
  3. <div class="modal-content">
  4. <div class="modal-header">
  5. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
  6. ×
  7. </button>
  8. <h4 class="modal-title" id="myModalLabel">登录提示:</h4>
  9. </div>
  10. <div class="modal-body">
  11. <div class="input-group">
  12. <span class="input-group-addon" id="basic-addon3">帐号:</span>
  13. <input type="text" class="input-sm" id="loginUser" aria-describedby="basic-addon3" placeholder="admin">
  14. </div>
  15. <div class="input-group">
  16. <span class="input-group-addon" id="basic-addon3">密码:</span>
  17. <input type="password" class="input-sm" id="loginPassword" aria-describedby="basic-addon3" placeholder="******">
  18. </div>
  19. </div>
  20. <div class="modal-footer">
  21. <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
  22. <button type="button" class="btn btn-primary" id="loginModalYesId">登录</button>
  23. </div>
  24. </div>
  25. </div>
  26. </div>

默认div是隐藏的 aria-hidden="true"

显示效果:

增加一个触发弹出对话框的按钮。

  1. <button type="button" class="btn btn-blue nav-external animated hiding" id="loginBntId" hidden="true">点击登录...</button>

增加js代码,当按钮loginBtnId按下时,显示对话框($('#loginModalId').modal('show');)。

  1. $(document).ready(function() {
  2. document.getElementById("loginBntId").onclick = function() {
  3. $('#loginModalId').modal('show');
  4. }
  5. document.getElementById("loginModalYesId").onclick = function() {
  6. $('#loginModalId').modal('hide');
  7. alert("登录功能未实现!");
  8. }
  9. });

为对话框上的 登录 按钮增加点击事件,事件发生后隐藏对话框($('#loginModalId').modal('hide');),并触发登录操作("登录功能未实现!")

参考:

http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html?from=androidqq

标签:function,窗口,登录,对话框,实现,bootstrap,loginModalId,modal
From: https://www.cnblogs.com/webSnow/p/17292952.html

相关文章

  • CAD命令行怎么恢复到初始状态?CAD命令行窗口恢复步骤
    CAD制图过程中,为了提高绘图效率经常会用到各种命令,很多命令信息及操作提示会在CAD命令行中显示。可当不小心改变了命令行的状态时,该怎么办呢?下面就和小编来了解一下CAD命令行怎么恢复到初始状态吧!CAD命令行窗口恢复初始步骤:1、启动浩辰CAD软件后,调用OP命令,即可打开【选项】对话......
  • 实现和CSS一样的easing动画?直接看Mozilla、Chromium源码!
    前言在上一篇丝滑的贝塞尔曲线:从数学原理到应用介绍贝塞尔曲线实现动画时给自己留了一个坑,实现的动画效果和CSS的transition-timing-function:cubic-bezier差别较大,如下图所示,红色为Linear、绿色为CSS的cubic-beizer、蓝色为自己实现的cbezier。本着有坑必填的原则,直接把Mozilla......
  • python实现各种算法详解,以及时间复杂度
    python实现各种排序1.快速排序1:首先取序列第一个元素为基准元素pivot=R[low]。i=low,j=high。2:从后向前扫描,找小于等于pivot的数,如果找到,R[i]与R[j]交换,i++。3:从前往后扫描,找大于pivot的数,如果找到,R[i]与R[j]交换,j--。4:重复2~3,直到i=j,返回该位置mid=i,该位置正好为pivot......
  • 移动信息技术助力数字化转型,实现企业新飞跃
    随着数字化转型的推进,移动信息技术已经成为了企业实现新飞跃的重要工具。移动信息技术是指利用移动通信、移动设备和移动网络等技术手段,实现信息的无线传输和处理的技术体系。一、移动信息技术的概念与发展移动信息技术是指通过移动通信和移动网络等技术手段,实现信息的无线传输......
  • 使用百度地图实现圆形,矩形自动生成路线点
    纯JS代码<!DOCTYPEhtml><html><head><metaname="viewport"content="initial-scale=1.0,user-scalable=no"/><metahttp-equiv="Content-Type"content="text/html;charset=utf-......
  • bootstrap5 .jqurey报错Cannot read properties of null (reading 'show')
    //toenabletooltipswiththedefaultconfiguration$('[data-bs-toggle="tooltip"]').tooltip()//toinitializetooltipswithgivenconfiguration$('[data-bs-toggle="tooltip"]').tooltip({boundary:'clipping......
  • Sleuth+Zipkin 实现 Spring Cloud 链路追踪
    一、前言在全链路监控:方案概述与比较 一文中,我们有详细介绍过分布式链路跟踪的实现理论基础。我们看到上图,知道在微服务架构下,系统的功能是由大量的微服务协调组成的,例如:电商下单业务就需要订单服务、库存服务、支付服务、短信通知服务逐级调用才能完成。而每个服务可能是由不同......
  • 使用malloc实现动态动态数组
    静态数组有一个弊端,就是在创建的时候数组的长度就已经确定了,并且不能更改了,并且使用之后如果我们不需要了,还不能销毁。使用malloc函数可以实现动态的创建数组,我们需要多长的数组就创建多长的数组,而且当我们不需要了,可以进行动态的销毁,从而实现了对我们计算机内存的回收利用``#i......
  • JWT 实现登录认证 + Token 自动续期方案
    要实现认证功能,很容易就会想到JWT或者session,但是两者有啥区别?各自的优缺点?应该Pick谁?夺命三连区别基于session和基于JWT的方式的主要区别就是用户的状态保存的位置,session是保存在服务端的,而JWT是保存在客户端的认证流程基于session的认证流程用户在浏览器中输入用户名和密码,服务......
  • 【过滤器设计模式详解】C/Java/JS/Go/Python/TS不同语言实现
    简介过滤器模式(FilterPattern)或标准模式(CriteriaPattern),是一种结构型模式。这种模式允许使用不同的标准条件来过滤一组对象,并通过逻辑运算的方式把各条件连接起来,它结合多个标准来获得单一标准。例子将创建一个Person对象、Criteria接口和实现了该接口的实体类,来过滤Perso......