bootstrap弹出框

最新推荐文章于 2022-06-19 16:06:48 发布
最新推荐文章于 2022-06-19 16:06:48 发布
阅读量106 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/theWayToAce/p/7234404.html
版权

 

弹出：data-toggle="modal" data-target="#layer"
消失：data-dismiss="modal"
结构：
 <!--模态框 弹出框-->
        <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-title">确认删除么?</h4>
                        <button data-dismiss="modal" type="button">弹出框消失</button>
                    </div>
                    <div class="modal-body text-right">
                        <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
                        <button data-dismiss="modal" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer2">确认</button>
                    </div>
                </div>
            </div>
        </div>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer">弹出框</button>
        <!--模态框 弹出框-->
        <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-title">确认删除么?</h4>
                        <button data-dismiss="modal" type="button">弹出框消失</button>
                    </div>
                    <div class="modal-body text-right">
                        <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
                        <button data-dismiss="modal" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer2">确认</button>
                    </div>
                </div>
            </div>
        </div>

        <div role="dialog" class="modal fade bs-example-modal-sm" id="layer2">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-title">第二个弹出框?</h4>
                    </div>
                    <div class="modal-body text-right">
                        <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
                        <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMsg(nowIndex)">确认</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>

    </script>
</body>
</html>

 

转载于:https://www.cnblogs.com/theWayToAce/p/7234404.html

bangxionger9224
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap4 弹出框
12-13
Bootstrap4 弹出框 弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。 如何创建弹出框 通过向元素添加 data-toggle=”popover” 来来创建弹出框。 title 属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容： 多次点我 注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法。 以下实例可以在文档的任何地方使用弹出框： 实例 $(document).ready(function(){ $('[data-toggle="popover"]'
Bootstrap 弹出框（Popover）插件
12-14
Bootstrap 弹出框（Popover）插件是一种交互式的UI组件，它在用户将鼠标悬停在特定元素上时展示一个扩展的信息视图。这个插件是基于Bootstrap框架，与工具提示（Tooltip）功能相似，但提供了更多的内容空间。在...
Bootstrap弹出框
weixin_34067102的博客
07-11 388
前面的话 　　表面上看，弹出框其实就是一种特殊的提示框，只是多了一个标题而已。但实际上，还是有不同之处的。本文将详细介绍Bootstrap弹出框   基本用法 　　在制作提示框（tooltip）时，可以使用&lt;button&gt;或者&lt;a&gt;标签元素，而且通过 data- 属性来声明提示框的信息。而弹出框popover和提示框tooltip相比，就多了一个content内容，...
JS组件Bootstrap实现弹出框和提示框效果代码
weixin_30462049的博客
06-08 631
JS组件Bootstrap实现弹出框和提示框效果代码 作者：懒得安分 字体：[增加 减小] 类型：转载 时间：2015-12-08 我要评论 这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码，对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言：对于Web开发人员，弹出框和提示框的使用肯定不会陌生，比如常见的表格新增和编辑功能，一般常见的主要有两...
bootstrap之弹出框
weixin_30338461的博客
02-22 95
1.模态框的核心在于 首先声明一个 模态框，标记其位置 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 2.将页面生成的html代码放到模态框中，我这边是在控制器中返回视图填充模态框，...
关于Bootstrap弹出框无法调用问题的解决办法
09-02
Bootstrap弹出框，也称为Popover，是前端开发中常用的一个交互元素，用于展示额外的信息或者操作选项。在本文中，我们将深入探讨当Bootstrap弹出框无法正常调用时可能遇到的问题及其解决办法。 首先，Bootstrap的弹...
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
08-31
在使用Bootstrap框架构建网页时，有时会遇到一个常见的问题，那就是Bootstrap弹出框（modal）中的输入框（input）无法获得焦点。这个问题通常发生在尝试在已存在的modal之上再弹出一个新的modal层时，由于Bootstrap...
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
12-10
Bootstrap弹出框是一种常见的网页交互元素，用于提供额外的信息或者操作选项。在Bootstrap框架中，弹出框（Popover）常用于创建悬浮提示信息，通过点击或悬停在特定元素上触发显示。本篇将深入讲解如何自定义...
jQuery+Bootstrap美化弹出框
12-05
基于jQuery和Bootstrap的弹出框，替代使用浏览器弹出的警告框，优化后弹出框样式。
eModal-基于Bootstrap的实用模态窗口对话框插件
12-11
eModal是一款非常实用的基于Bootstrap的模态窗口对话框插件。该模态窗口对话框插件可以制作警告框，确认框，提示框等，并且可以通过Ajax远程加载内容，还可以嵌入iframe框架等，功能非常齐全。
利用BootStrap弹出二级对话框的简单实现方法
11-22
弹出二级对话框，即在对话框的基础上再弹出一个对话框。这对于CRM管理类系统来说应用场景很常见。看到网上有关于实现二级弹出框的方法，需要在一级对话框页面上添加不少css样式。其实，完全可以不用这么麻烦。 利用bootstrap实现二级对话框很简单，只需要在主页面上添加两个含有class=”modal”的DIV标签。如下面代码： <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <meta name="decorator" content="window" /> <style type="text/css
Bootstrap实现提示框和弹出框效果
08-31
主要为大家详细介绍了Bootstrap实现弹出框和提示框效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap 提示框
21号先锋者
02-08 354
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt;&lt;!--设置字符集utf-8编码--&gt; &lt;meta name="viewport" content="width=device-
Bootstrap 弹出框
书香水墨
07-25 3559
一、Bootstrap 弹出框 弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。 注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法。 1.1 基本弹出框 通过向元素添加 data-toggle=“popover” 来来创建弹出框。 title 属性的内容为弹出框的标题，data-content 属性...
Bootstrap系列之弹出框（Popovers）
老__L的博客
06-19 1万+
使用弹窗插件时要知道的事情弹出框依赖于第三方库Popper进行定位。你必须在之前包含或使用/，其中包含Popper以便弹出框工作；弹出框需要tooltip插件作为依赖项；如果您从源代码构建我们的JavaScript，它需要util.js；由于性能原因，弹窗是可选择的，所以您必须自己初始化它们；零长度的标题和内容值将永远不会显示弹出框；指定以避免在更复杂的组件(如输入组、按钮组等)中呈现问题；在隐藏元素上触发弹窗将不起作用；.disabled或disabled。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值