AdminLTE3框架下的BootStrap Modal 模态框

最新推荐文章于 2020-01-16 21:45:11 发布
最新推荐文章于 2020-01-16 21:45:11 发布
阅读量8.1k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38409944/article/details/82979560
版权
直接贴出栗子：里面有注解：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>SS
摘要由CSDN通过智能技术生成

直接贴出栗子：里面有注解：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SSM | Modal Test</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="dist/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="dist/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/adminlte.min.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition login-page">
<div style="width:720px;margin:7% auto">
    <div class="content">
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            直接创建模态框1
        </button>
        <br>
        <br>
        <button class="btn btn-primary btn-lg" onclick="jsOpenModal()">
            js打开模态框1
        </button>
        <br>
最低0.47元/天 解锁文章
codingCoge
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AdminLTE2的模态框(弹出框)
"✧treasure mountain✧"
03-03 9954
刚好一个SSM练习项目中用到了这个弹出模态框的设计 来记录一下 关于这个模态框 找了很久 很多都不能用 后来自己去官网找了一段模态框代码 亲测可用 先上模态框代码： <div class="modal fade" id="modal-default"> <div class="modal-dialog"> <div class="modal-co...
admin-lte+ng-bootstrap组合开发之modal弹层不显示
IT飞牛
05-22 298
在用admin-lte做前端页面框架做开发，需要用到弹出层效果时，看到ng-bootstrap中有Modal实现弹层效果。 ##步骤如下： 1、安装和配置ng-bootstrap，具体见：https://www.jianshu.com/p/69008093ecca 2、html模板代码： <ng-template #content let-c="close" let-d="dismiss"> <div class="modal-header">
adminLTE模态框弹出页面样例
佳友
05-28 7996
项目中引用adminLTE前端框架，弹出页面是模态框方法， 下面是某个detail.html文件 <div class="modal fade" id="viewDialog" role="viewDialog" aria-hidden="true"> <div class="modal-dialog modal-full"> &l...
弹出（新增和修改）模态框
weixin_44550190的博客
04-28 1983
（作者：薛明展，撰写时间：2019年4月27日） 这次我要讲解的是弹出新增模态框和弹出修改的模态框，接下来我们就从html部分开始。 首先讲的是弹出新增模态框，请看下面这张截图： 图1 我们看到图1，这是弹出新增的模态框，也就是图1代码的第一句。第二句代码的意思是重置表单，接下来的第三句代码的意思是弹出模态框。 然后我们看下一步，请看下面截图： 图2 我们也看到，图2的代码这是下拉框数据的绑定...
AdminLTE3-图标icon使用
immocha的博客
01-16 6718
在adminLTE3中推荐使用以下3个图标库 Font Awesome Iconic Icons Ion Icons 链接相应CSS文件来使用 <!-- Font Awesome --> <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css"> <!-- Ionicons --&...
adminlte modal预览图片显示上下切换效果
佳友
05-28 1307
页面demo, 模态框弹出示例，参考上一篇说明 ：https://blog.csdn.net/friend365/article/details/90633012 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</titl...
Bootstrap模态框（Modal）实现过渡效果
08-31
Bootstrap 模态框（Modal）实现过渡效果 Bootstrap 模态框（Modal）是一种常用的_web_组件，用于在当前页面中弹出一个遮罩层，显示一些重要信息或进行一些操作。实现过渡效果是指在模态框（Modal）弹出和隐藏时，...
Bootstrap3 模态框使用实例
08-31
Bootstrap3 模态框（Modal）是网页设计中常用的一种交互元素，用于展示弹出式的内容，如警告、确认对话框或者更复杂的信息。它允许用户在不离开当前页面的情况下处理额外的信息或执行操作。以下是对Bootstrap3模态框...
Bootstrap 模态框（Modal）带参数传值实例
08-29
Bootstrap模态框（Modal）是Web开发中常用的一种交互元素，它允许用户在不离开当前页面的情况下处理额外信息或执行操作。在实际应用中，我们经常需要将数据从父页面传递到模态框中，以确保操作的针对性和准确性。本...
eModal是一款非常实用的基于Bootstrap的模态窗口对话框插件
08-10
eModal是一款非常实用的基于Bootstrap的模态窗口对话框插件。该模态窗口对话框插件可以制作警告框，确认框，提示框等，并且可以通过Ajax远程加载内容，还可以嵌入iframe框架等，功能非常齐全。
Maven 基于SSM框架的增删改(使用了bootstrap的模态框，分页插件pagehelper, ajax等，附sql文件）
06-03
Maven 基于SSM框架的增删改(使用了bootstrap的模态框，分页插件pagehelper, ajax等，附sql文件）
通用后台管理模版类似AdminLTE，可定制化的管理模版，集成了众多常用插件
02-08
通用后台管理类似AdminLTE模版,该模版基于bootstrap与jQuery制作，集成了众多常用插件，基本满足日常后台需要,修改时可根据自身需求,可定制化的管理模版
AdminLTE bootstrap 后台框架
09-12
超级漂亮的AdminLTE bootstrap 后台框架，用于开发自己的项目超级给力，兼容现有的绝大多数浏览器。试过你就知道。
bootstrap 模态框（modal）实现水平垂直居中显示
08-31
Bootstrap模态框（Modal）是该框架中一个非常重要的组件，它用于创建弹出式的对话框，常用于显示额外信息、表单输入或用户交互。然而，默认情况下，模态框在页面上的位置并不是水平垂直居中的，而是固定在距离顶部30...
浅析BootStrap中Modal（模态框）使用心得
10-20
Bootstrap模态框（Modal）是前端开发中常用的一个组件，它允许在当前页面上弹出一个浮动窗口，用于展示额外的信息或进行交互操作，而无需跳转到新的页面。模态框是基于JQuery插件构建的，因此在使用前需要确保引入了...
AdminLTE自定义传递参数
qq_22175485的博客
06-26 930
AdminLTE自定义传参，可多参传递 主要是针对编辑或者详情需要传递多参数的要求，这个针对的是ibase4j+adminLTEde技术： 1.在table.js中大概47行中，添加以下代码： 代码如下： edit_param_name:[],//编辑传递参数名 detail_param_name:[],//详情传递参数名 2.在table.js中大概286行中，将代码更改为以下图所...
BootStrap modal模态弹窗使用
汉堡请不要欺负面条
11-27 4599
默认的model案例： Bootstrap Modal Launch demo modal ×
基于AdminLTE的开发框架-AdminEAP
热门推荐
jrn1012的专栏
08-22 6万+
AdminEAP是基于AdminLTE的开发框架，目前所包含的系统功能有：Component组件集成、CURD增删改查demo、系统工具、工作流、系统权限与安全、Github源码与License、联系我们，提供了前端、后端整体解决方案，使得web开发更简单。
bootstrap 3 模态框　modal-body能用百分比吗
最新发布
06-03
在 Bootstrap 3 模态框中，`modal-body` 的高度默认是根据内容自适应的，如果需要使用百分比设置 `modal-body` 的高度，可以通过以下方法实现： 1. 在 CSS 样式中给 `.modal-body` 添加 `height` 属性和 `overflow-y` 属性，例如： ```css .modal-body { height: 60%; overflow-y: auto; } ``` 2. 将 `height` 的值设置成所需百分比，这样可以设置模态框内容区域的高度，并且当内容超出高度时会出现滚动条。 以下是一个示例代码： ```html <div class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal Title</h4> </div> <div class="modal-body" style="height: 60%; overflow-y: auto;"> <!-- Modal Body Content --> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> ``` 通过以上方法，你可以在 Bootstrap 3 模态框中使用百分比设置 `modal-body` 的高度，并且可以控制滚动条的显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值