写在前面

在实际开发中，为了友好，更需要一种美观的弹出框，js原生的alert，很难满足需求。这里推荐一个bootstrap的弹出框。

一个例子

先看效果吧

代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>模式弹出框</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

    <link href="Css/bootstrap.min.css" rel="stylesheet" />

    <script src="JS/jquery.js"></script>

    <script src="JS/bootstrap.min.js"></script>

    <script>

    </script>

    <style>

        .blue {

            background-color: #0094ff;

        }

        .text-center {

            text-align: center;

        }

    </style>

</head>

<body>

    <input type="button" data-target="#loginModal" data-toggle="modal" name="name" class="form-control  bt-red" value="登录" />

    <!-- modal -->

    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header blue">

                    登录

                </div>

                <div class="modal-body">

                    <input type="text" class="form-control" placeholder="请输入用户名" name="name" />

                    <input type="password" class="form-control" placeholder="请输入密码" value="新建文件夹" name="name" />

                </div>

                <div class="modal-footer">

                    <div class="form-control text-center">登录</div>

                    <div class="form-control text-center" data-dismiss="modal"><div class="button"></div>取消</div>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

注意

data-target属性，指向了model的id，所以点击按钮，model就会弹出来了。

用js也可以来控制

<script>

    $("#btnLogin").click(function () {

        //显示

        $("#loginModal").modal("show");

        //隐藏

        $('#loginModal').modal('hide');

        //切换

        $('#myModal').modal('toogle');

    });

</script>

总结

之所以推荐这个弹出框，是因为这个操作更方便，因为在项目中用到bootstrap，这样也不需要再去添加其他的引用了。如果用来作为提示框，可以修改modal-body中的内容为字符串就可以了。

[Bootstrap]modal弹出框的更多相关文章

  1. Bootstrap：弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  2. JS组件Bootstrap实现弹出框和提示框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...

  3. Bootstrap模态弹出框

    前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...

  4. Bootboxjs快速制作Bootstrap的弹出框效果

    Bootboxjs是一个简单的js库,简单快捷帮你制作一个Bootstrap的弹出框效果. 一.简介 bootbox.js是一个小的JavaScript库,它帮助您在使用bootstrap框架的时候快 ...

  5. Bootstrap实现弹出框和提示框效果代码

    一.Bootstrap弹出框使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富.与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件.打开 ...

  6. Bootstrap popover弹出框

    popover被挤压.遮挡的问题: 弹出框显示的时候如果贴近一个列的边沿,就会很窄或被遮挡,解决起来很简单,只需在初始化的时候添加一个container属性就可以了: $(function (){ $ ...

  7. 自定义Bootstrap样式弹出框

    最近做的一些功能需要用到Bootstrap,然而原来的系统并没有引入Bootstrap,为了新写的控件能够应用于老的页面,又不需要在老的页面上引入全套的Bootstrap文件决定写一个模仿Bootst ...

  8. bootstrap的弹出框

    data-toggle="popover";//以弹出框事件触发 data-content="弹出框中内容"; data-placement="弹出框 ...

  9. firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出（解决方案）

    问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...

随机推荐

  1. OpenCV学习笔记（01）我的第一个OpenCV程序（环境配置）

    昨天刚刚考完编译原理,私心想着可以做一些与考试无关的东西了.一直想做和图像处理相关的东西,趁这段时间有空学习一下OpenCV,搭建环境真是一件麻烦的事情,搞了近三个小时终于OK了.先来张图: 大致描述 ...

  2. CMDB资产管理系统开发【day27】：cmdb API安全认证

    1.API验证分析 API三关验证 客户端和服务端中都存放一份相同的随机字符串,客户端发请求的时候把随机字符串和当前时间进行MD5加密,同时带着当前时间通过请求头发送到API,进入三关验证. 第一关是 ...

  3. [技巧篇]11.JavaScript原生态如何获取浏览器请求地址中的参数

    var getAccessParams = function(){ var i,ilen,strs,keyName,keyValue, params={}, path = window.locatio ...

  4. 前端为什么要对url进行编码

    为什么要对url进行编码 url有规范,在参数值中出现&字符会截断参数 url中文的问题,编码客转换为英文 也是第一种情况,url中有个参数值是url,传输的时候会出现错误 例1 有这样一串参 ...

  5. 九度OJ 1535 重叠的最长子串

    重叠的最长子串 http://ac.jobdu.com/problem.php?pid=1535 时间限制:1 秒 内存限制:128 兆 题目描述: 给定两个字符串,求它们前后重叠的最长子串的长度,比 ...

  6. HDU 5868 Different Circle Permutation Burnside引理+矩阵快速幂+逆元

    题意:有N个座位,人可以选座位,但选的座位不能相邻,且旋转不同构的坐法有几种.如4个座位有3种做法.\( 1≤N≤1000000000 (10^9) \). 题解:首先考虑座位不相邻的选法问题,如果不 ...

  7. 彻底找到 Tomcat 启动速度慢的元凶 /dev/random

    参考  http://blog.csdn.net/u013939884/article/details/72860358

  8. 51nod1667 概率好题

    基准时间限制:4 秒 空间限制:131072 KB 分值: 640  甲乙进行比赛. 他们各有k1,k2个集合[Li,Ri] 每次随机从他们拥有的每个集合中都取出一个数 S1=sigma甲取出的数,S ...

  9. java分页通用篇

    一.创建分页通用类 package com.dkyw.util; import java.util.List; public class Page<T> { private int tot ...

  10. MongoDB 数据库（1）

    数据库 MongoDB (芒果数据库) 数据存储阶段 文件管理阶段 (.txt .doc .xls) 优点 : 数据可以长期保存 可以存储大量的数据 使用简单 缺点 : 数据一致性差 数据查找修改不方 ...