整理：手机端弹出提示框，使用的bootstrap中的模态框（modal，弹出层），比kendo弹出效果好

最新推荐文章于 2024-08-19 15:26:51 发布
最新推荐文章于 2024-08-19 15:26:51 发布
阅读量5.8k 收藏 1
点赞数
分类专栏： kendo 手机 文章标签： kendo bootstrap

参考文献


http://blog.csdn.net/dearcode/article/details/52220064

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Modal</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style type="text/css">
    @@media screen and (min-width: 768px) {
    .modal-dialog {
    right: auto;
    left: 0%;
    width: 600px;
    padding-top: 30px;
    padding-bottom: 30px;
    }
    .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
    }
    </style>></head>
<body>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
    </button>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">温馨提示</h4>
                </div>
                <div class="modal-body">
                    <p>您的操作不可逆</p>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn">Close</button>
                    <button type="button" class="btn btn-primary">Save</button>
                </div>
            </div>
        </div>
    </div>

    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
@*为 .modal 添加 role="dialog"，用于指定模态框为对话框。
为 .modal-dialog 添加 aria-hidden="true" 属性。
通过 aria-describedby 属性为模态框 .modal 添加描述性信息。
关闭动画
如果你不需要模态框弹出时的动画效果（淡入淡出效果），删掉 .fade 类即可。

通过按钮属性显示不同内容
当有一堆按钮，都要触发相同的模态框(如：向好友列表中某个人发消息)，只是有用户ID不同，那么可以使用data-whatever配合event.relatedtarget来实现：
[html] view plain copy
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Modal</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>


    <div class="panel panel-default">
        <div class="panel-heading">好友列表</div>
        <div class="panel-body">
            <div class="list-group" role="group" aria-label="好友列表">
                <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
                        data-whatever="张三">
                    张三
                </button>
                <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
                        data-whatever="李四">
                    李四
                </button>
                <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
                        data-whatever="王二">
                    王二
                </button>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="exampleModalLabel">New message</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Recipient:</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">Message:</label>
                            <textarea class="form-control" id="message-text"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Send message</button>
                </div>
            </div>
        </div>
    </div>
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // 触发事件的按钮
            var recipient = button.data('whatever') // 解析出data-whatever内容
            var modal = $(this)
            modal.find('.modal-title').text('Message To ' + recipient)
            modal.find('.modal-body input').val(recipient)
        })
    </script>
</body>
</html>*@


飞鸟flyboy
关注
专栏目录
bootstrap演示20种不同的手机响应式弹出层modal特效
01-15
bootstrap演示20种不同的手机响应式弹出层modal特效，jQuery经典插件大全-实例-教程-参数详解。
基于bootstrap的移动手机端全屏模态窗口插件
12-11
bootstrap-fs-modal是一款基于bootstrap的移动手机端全屏模态窗口插件。原生的bootstrap模态窗口在移动手机端的用户体验不是很好，通过该插件可以大大的提高用户体验。
整理：手机端弹出提示框，使用的bootstrap中的模态框（modal，弹出层），比kendo弹出效果好...
子钦加油的博客
10-22 607
效果图： 我的代码示例： <!--提示模态框--> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document...
HTML5+CSS3学习笔记补充——移动端网页+Bootstrap框架
最新发布
weixin_72043867的博客
08-19 1114
移动端如何进行网页适配，rem+vw，媒体查询，less，bootstrap框架
bootstrap modal （模态框）在手机端输入自动放大问题解决方案--关闭手动放大缩小功能
hijk7的博客
10-21 351
bootstrap modal （模态框）在手机端输入自动放大问题解决方案--关闭手动放大缩小功能
简单实现关于手机移动端模态框
m0_37909187的博客
09-28 2965
简单实现关于手机移动端模态框 html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"
BootStrap中的模态框（modal，弹出层）功能示例代码
10-17
在Bootstrap框架中，模态框（Modal）是一种非常实用的组件，它允许用户在当前页面上弹出一个对话框，而无需离开当前上下文。模态框提供了丰富的交互性和自定义选项，使得开发者能够轻松创建各种类型的弹出窗口，如...
bootstrap模态框弹出效果
06-24
Bootstrap模态框（Modal）是Web开发中常用的一种交互元素，它允许在当前页面上以弹出窗口的形式展示内容，而无需跳转到新的页面。Bootstrap框架提供了丰富的模态框功能，包括动画效果、可定制的样式以及方便的API，...
ModalLayer模态框插件js弹出框
06-11
在网页设计和开发中，模态框（Modal Layer）是一种常用的设计元素，它用于在当前页面上弹出一个半透明的覆盖层，显示额外的信息或者进行交互操作，而不会中断用户与主页面的联系。ModalLayer是一款强大的JavaScript...
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
08-31
在使用Bootstrap框架构建网页时，有时会遇到一个常见的问题，那就是Bootstrap弹出框（modal）中的输入框（input）无法获得焦点。这个问题通常发生在尝试在已存在的modal之上再弹出一个新的modal层时，由于Bootstrap...
Bootstrap弹出框(modal)垂直居中
JUDD14273的博客
08-22 162
最近在做一个eit项目，由于此项目里面一些框架要遵循nttdata的一些规则，故用到了Bootstrap这个东东，第一次碰到这个东东，有很大抵触，觉得不好，但用起来我觉得和别的弹出框真没什么两样。废话少说，切入正题，Bootstrap弹出框垂直居中的问题，因为我拿到的弹出框样式并非垂直居中，而是top 10%，但页面长了，就显得特别恶心。 解决方案： 1.在css里，找到 .mod...
JS组件Bootstrap实现弹出框和提示框效果代码
11-25
前言：对于Web开发人员，弹出框和提示框的使用肯定不会陌生，比如常见的表格新增和编辑功能，一般常见的主要有两种处理方式：行内编辑和弹出框编辑。在增加用户体验方面，弹出框和提示框起着重要的作用，如果你的系统有一个友好的弹出提示框，自然能给用户很好的页面体验。前面几章介绍了bootstrap的几个常用组件，这章来看看bootstrap里面弹出框和提示框的处理。总的来说，弹出提示主要分为三种：弹出框、确定取消提示框、信息提示框。本篇就结合这三种类型分别来介绍下它们的使用。 一、Bootstrap弹出框 使用过JQuery UI应该知道，它里面有一个dialog的弹出框组件，功能也很丰富。与jQue
Bootstrap（6）前端
jayden
05-07 348
对封装了css和javascirpt的主流库Bootstrap进行了详细的讲解，让学习者快速入门bootStap，每一个核心内容都有代码实例讲解，最后授人以渔，后续方便自学。
Bootstrap模态框宽度自适应（css实现）
xz842913787的博客
07-23 3287
<div class="modal fade text-center" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true"> <div class="modal-dialog" style="display: inline-block; width:50%;"> <div class="modal-.
kendo.mobile 的modalview微件
飞鸟的博客
02-23 563
相关属性 1    data-role="modalview" 2   data-open="aaaaaa" 打开时候调用的函数 3   data-close="aaaaa" 关闭的时候执行的参数 4   data-modal="false"  点击空白处关闭 5  data-style="inset" 显示风格，通用 6  data-width="300px" 宽度 7  data
android ios 对比 组件_手机端iOS&Android模态界面对比【2019新版】
weixin_30260057的博客
01-02 255
在日常工作中，偶尔会谈及到“模态”和“非模态”，因此做了一些调研和思考 ，分享给大家。Part1 如何理解“模态”和“非模态”？先看一下维基百科对于“模态窗口” (Modal window)的解释：“在计算机应用程序的用户界面设计中，模态窗口是从属于主窗口的图形控制元素。它创建一种样式，使主窗口禁用但保持可见，模态窗口作为子窗口展示在其上方。用户必须与模态窗口进行交互，才能返回父应用程序...
Kendoui：新建一个model
刘涛的博客
04-11 875
Kendoui：新建一个model
关于BootStrap中Modal（模态框）使用心得
热门推荐
heshouyou的博客
12-24 6万+
关于BootStrap中Modal（模态框）使用心得 一、modal使用： 1.1、登录bootstrap官网，点击下载Bootstrap 1.2、导入对应的样式文件css 1.3、导入对应的js，需要导入bootstrap.js或者bootstrap.min.js文件，bootstrap的前提是jquery，所以我们要在导入bootstrap.js前面导入jquery.min.js 对
Bootstrap实战：创建提示框与弹出框教程
本文重点介绍如何利用Bootstrap实现提示框（Tooltip）和弹出框（Popovers）的效果，这对于任何希望提升用户交互体验的Web开发者来说都是非常实用的知识。 首先，我们来了解如何创建基本的提示框。提示框通常会在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值