bootstrap实现模态框

最新推荐文章于 2022-01-24 09:07:44 发布
最新推荐文章于 2022-01-24 09:07:44 发布
阅读量282 收藏
点赞数
分类专栏： bootstrap学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fangyuwuzhu/article/details/80003030
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">NIIT教程</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" data-toggle="modal" data-target="#register-modal"><span class="glyphicon glyphicon-user"></span>  注册</a></li>
<li><a href="#" data-toggle="modal" data-target="#login-modal"><span class="glyphicon glyphicon-log-in"></span>  登录</a></li>
<li><button class="btn btn-info" type="button"  οnclick="dkmodal()">手动打开模态框</button></li>
</ul>
</div>
</nav>
</div>

<!--登录模态框开始-->
<div class="modal" id="login-modal" tabindex="-1">


<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">&times;</button>
<h3 class="text-success">登录界面</h3>
</div>
<div class="modal-body">
<form id="login-form" class="form-horizontal" action="#" method="post">
<div class="form-group">
<label class="col-lg-3">
<h5 class="text-success text-center">用户名</h5>
</label>
<div class="col-lg-9">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3">
<h5 class="text-success text-center">密码</h5>
</label>
<div class="col-lg-9">
<input type="password" class="form-control" name="password" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-success" value="登录" form="login-form" />
<button class="btn btn-danger" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<!--登录模态框结束-->
<!--注册模态框开始-->
<div class="modal" id="register-modal" tabindex="-1">


<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">&times;</button>
<h3 class="text-success">注册界面</h3>
</div>
<div class="modal-body">
<form id="register-form" class="form-horizontal" action="#" method="post">
<div class="form-group">
<label class="col-lg-3">
<h5 class="text-success text-center">用户名</h5>
</label>
<div class="col-lg-9">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3">
<h5 class="text-success text-center">密码</h5>
</label>
<div class="col-lg-9">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3">
<h5 class="text-success text-center">确认密码</h5>
</label>
<div class="col-lg-9">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3">
<h5 class="text-success text-center">邮箱</h5>
</label>
<div class="col-lg-9">
<input type="email" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3">
<h5 class="text-success text-center">电话</h5>
</label>
<div class="col-lg-9">
<input type="phone" class="form-control" name="phone" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-success" value="登录" form="register-form" />
<button class="btn btn-danger" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<!--注册模态框结束-->
</body>
<script>
$(function(){
$("#login-modal").modal({
backdrop:"static",
show:false,
keyboard:false
});
$("#register-modal").modal({
backdrop:"static",
show:false,
keyboard:false
});
});
function dkmodal(){
$("#login-modal").modal("show");
}
</script>

</html>




愚城
关注
专栏目录
bootstrap 实现模态框
学无止境
07-13 587
page contentType="text/html;charset=UTF-8" language="java" %> taglib prefix="s" uri="/struts-tags" %> HTML> html lang="zh-CN"> head> meta charset="utf-8"> meta name="format-detection" content="telepho
Bootstrap模态框modal的实现
gyueh的博客
11-07 309
以下实例创建模态框效果: 1.下载用于生产环境的Bootstrap (网址：https://v3.bootcss.com/getting-started/#download) 2.在页面内head标签内引入样式库bootstrap.min.css 3.在页面内body标签尾部引入任意一jq库和bootstrap.min.js， 例如： <head> <meta chars...
模态框以及大小和位置
qq_32993549的博客
03-29 7730
1.  描述模态框Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实用功能。您可以在 Modals（模态框）中使用 Popover（弹出框）和 Tooltip（工具提示插件）。在本教程中，将通过一些实例和解释来讨论如何使用 Bootstrap 创建模态窗口。同时，我们也会讨论用于定制的各种可用选项。2.需要的文件您...
bootstrap 模态窗口按钮位置_Bootstrap 模态框（Modal）插件的使用
weixin_39796533的博客
01-26 348
Bootstrap模态框(modal)不知道谁起的名字，反正就这么回事。经常使用在网站的 登陆/注册 按钮，弹出模态框，来提醒用户输入的同时，网站有一个遮罩层来屏蔽其他的操作。一、 使用方法：1、通过自定义 data 属性来调用；2、使用js来调用，一般不用此方法；$('#comeback').modal(options) 通过 JavaScript 来调用带有 id='comeback' 的模态...
如何调整模态对话框的位置
学而不思则罔
07-06 2130
在模态对话框类的OnInitDialog中调用SetWindowPos或MoveWindow即可
Bootstrap实现模态框效果
12-13
在Bootstrap框架中，实现模态框效果非常简单，只需要遵循一定的HTML结构和引入相应的JavaScript库。 首先，模态框的实现依赖于Bootstrap的CSS样式和JavaScript插件。在HTML文档中，确保引入了Bootstrap的CSS文件...
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
08-29
总之，通过在按钮上添加`data-dismiss="modal"`属性，我们可以轻松地实现Bootstrap模态框的自动关闭。对于需要在保存操作完成后关闭模态框的情况，可以结合JavaScript进行处理。无论是在前端还是后端验证通过后，都...
BootStrap 模态框实现刷新网页并关闭功能
08-31
本篇文章将详细介绍如何利用Bootstrap模态框实现刷新网页并关闭的功能，以及如何禁用空白处点击关闭模态框。 首先，我们需要了解Bootstrap模态框的事件绑定机制。Bootstrap提供了多种与模态框相关的事件，包括`show...
Bootstrap3 模态框使用实例
08-31
Bootstrap3 模态框（Modal）是网页设计中常用的一种交互元素，用于展示弹出式的内容，如警告、确认对话框或者更复杂的信息。它允许用户在不离开当前页面的情况下处理额外的信息或执行操作。以下是对Bootstrap3模态框...
bootstrap模态框的详细用法
neos的博客
10-10 1万+
本文介绍了bootstrap中模态框的用法，在文章中我尽量将这一功能说明详细，同时我忽略了部分大部分情况不会使用的属性，也插入一些个人在实际工作中的观点，本文的目标是在你看完本文以后能够较为熟练的使用模态框这一功能，并且不会碰到太多坑。首次写微博，不足之处希望各位看官见谅，如果有大佬看的不爽的也请多多指正，在这里先谢过了。最后如果您喜欢我的文章麻烦点个赞哦。
bootstrap之弹出框（模态框）的简单应用
bobo1356的博客
01-05 2974
弹出框是一个经常使用的组件，一般用于弹出提示信息，确认信息，表单等内容。 弹出框是浮动在页面之上的，弹出时其他页面元素不可被选中。 弹出框的基本结构：头部、内容、底部（常常是按钮） 基本用法： 1.通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#
零基础Bootstrap入门教程(16)--模态框
程序员大阳
02-24 2897
本文目录1. 概述2. 模态框样式3. 按钮直接关联模态框4. 通过JS方法打开/关闭模态框5. 调整大小6. 动画效果7. 小结 1. 概述 模态框这个名字有点高雅了，其实就是对话框，用来弹出一个新的界面。 模态框的使用非常的场景，例如在用户管理页面，当进行用户新增时，可以点击新增按钮，弹出一个窗体供填入用户信息然后保存。 注意Bootstrap的模态框一次只能显示一个，不能在打开一个模态框后尝试继续打开第二个。 2. 模态框样式 模态框相关的样式类比较多，我个人是感觉有些过于复杂了，当然这里也不排除Bo
bootstrap模态框实现弹出窗口修改表格数据
Adobe_java的博客
01-24 2999
通过bootstrap模态框实现弹出窗口修改表格数据
bootstrap 模态框（modal）实现水平垂直居中显示 含具体分析
Altaba的博客
01-22 3万+
欢迎来到Altaba的博客  2017年1月22日        众所周知，bootstrap是一款非常实用的CSS框架（主要用于样式的快速搭建），由于其简洁，美观，快捷，响应式等特点备受大家喜欢，但是其本身也是存在很多bug，当应对与具体的业务逻辑的时候往往达不到细节要求，比如今天我要谈的bootstrap的模态框，其默认是显示距离顶端30px，左右居中。        怎么让其在垂直方向也
bootstrap table 第一弹：实现模态框弹出编辑
weixin_33938733的博客
04-02 4778
布局代码： 效果图： <!doctype html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, init...
Bootstrap(七) 模态框(modal)、标签页(nav-tabs)、提示框、弹出框
wangchaohpu的博客
08-29 2650
1、模态框 2、标签页 3、提示框 4、弹出框
bootstrap中的模态框（modal，弹出层）
热门推荐
开发笔记
08-16 12万+
bootstrap中的模态框（modal），不同于Tooltips，模态框以弹出对话框的形式出现，具有最小和最实用的功能集。务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现或功能。
bootstrap模态框弹出位置设置
iteye_13833的博客
02-03 4808
&lt;div class="modal fade modal_position" id="myModal" tabindex="-1" style="min-width:275px;"&gt; &lt;div class="modal-dialog modal-sm"&gt; &lt;div class="modal-cont
利用bootstrap模态框实现新增修改功能
i__am__a的博客
06-24 5265
开发环境 VS2019 SqlServer数据库2012 事先创建一个名为Rbac的数据库，表名Roles 打开VS2019，创建一个MVC项目，添加控制器，以及视图 创建实体模型，引用model 新增 显示数据页面 <table class="table table-bordered"> <thead> <tr> <th>名称</th> <th>备注&l
给我写一段用bootstrap实现模态框效果
最新发布
04-18
好的，以下是使用bootstrap实现模态框效果的代码： <!-- 模态框按钮 --> 打开模态框 <!-- 模态框 --> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值