Modal提示框插件的使用

　　之前有记录过类似美化alert(),confirm()和prompt功能的插件xcConfirm，其优点是比较轻量级，能够快速接入，对于简单的提示效果明显，但其缺点就是自定义起来不方便，所以就记录一款相对较重但是可以随意定义的插件Modal，下面记录一下该款插件的使用方法，详情可参考Modal的官方文档http://v4.bootcss.com/getting-started/introduction/

　　Modal插件使用需要接入bootstrap.css和bootstrap.js，所以去bootstrap官网对应下载后临时文件夹的目录如下：

　　然后在temp.html内定义一个button和一个Modal(其中button和input的样式都来自于bootstrap.min.css :btn btn-default和form-control long),并对button设置data-target="Modal的id" data-toggle="modal" 属性来绑定对应的Modal,来实现一个简单的弹窗功能，html如下：

<!doctype html>
<html><head><title>Modal测试</title><!--引入bootstrap样式--><link type='text/css' rel='stylesheet' href="bootstrap.min.css"><script src='jquery.js'></script><script src='bootstrap.min.js'></script></head><body><!--为button绑定Modal--><button type='button' class='btn btn-default' data-target='#myModal' data-toggle='modal'>点我点我</button><!--Modal部分,默认不显示，内部样式自己随意定义--><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog" style="width: 700px;margin-top: 150px;"><div class="modal-content" style="height: 400px;width: 700px;padding-left: 10px;padding-right: 10px"><!--头部--><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="myModalLabel">信息记录</h4></div><!--体部--><div class="modal-body" style="height: 200px"><input class="form-control" placeholder="请输入标题" id="title" style="margin-bottom: 15px;"/><textarea class='form-control' placeholder="请输入内容" id="content" style='height:180px;'></textarea></div><!--尾部--><div class="modal-footer" style="margin-top: 75px;"><button type="button" class="btn btn-primary btn-blue" onclick="myPrint()">确认</button><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button></div></div></div></div></body>
</html><script>
function myPrint()
{var title=$("#title").val();var content=$("#content").val();alert(title+"\n"+content);
}
</script>

　　然后打开页面只有一个按钮：

　　点击后就弹出Modal框：

　　这些input的样式，按钮的样式都是可以自己定义的，相对之前就方便许多。通过设置data-target="#myModal" data-toggle="modal"是让按钮自动绑定弹框，使其点击按钮时自动弹出与隐藏，其实如果只设置data-target="#myModal"就可以实现Modal框的手动弹出与隐藏了，这时只需在JS里调用

$("myModal").modal('show')和$("myModal").modal('hide')即可手动开关，这种情况比较适合于某一行带标识id参数的弹框处理，因为这时候要安排好弹框的先后顺序以及那个按钮的click()事件。最后再对Modal框上的“确定按钮”和“取消按钮”绑定对应的方法即可，恩，还是这种自定义的比较Under Control！

转载于:https://www.cnblogs.com/martianShu/p/5950174.html

Modal提示框插件的使用相关推荐

在指定位置上方出现通用jquery悬浮提示框插件全站通用
工作需要,网站悬浮提示框要求出现在指定元素上方,由于工作量修改比较大所以要求全站通用,所以写了一个juqery插件,插件很简单,大家可以自行更改样式. 请转载此文的朋友务必附带原文链接,谢谢. 原文链 ...
15个友好的jQuery 提示框插件
需要在用户把光标移到某个元素上时显示一些额外信息时,提示框是一种不错的方式,提示框会在鼠标停留的时候显示,鼠标移开时消失. 适当的使用提示框能大大提升网站的友好度,并且可以节省一些不必要的网页空间,今 ...
轻量级Modal模态框插件cta.js
今天给大家分享一款轻量级Modal模态框插件cta.js.这是一款无需使用jQuery插件,纯js编写的模态框弹出特效.效果图如下: 在线预览源码下载实现的代码. html代码: <se ...
轻巧的jQuery提示框插件Tipso演示
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8&qu ...
数据可视化——（提示框插件）
提示框插件有很多,不同的框架中选择的也不一样. 本文主要分享toastr插件总结它的使用步骤如下: 使用步骤: 加载 jqury.js.toastr.css 和 toastr.js 文件全局配置. ...
vue.js提示框插件(vuejs-dialog)使用指南
vue.js提示框插件更多文章,请访问我的博客综述在项目中,代替浏览器原生的alert.confirm和prompt 名称:vuejs-dialog 用途:简洁美观的对话框官网:地址 gith ...
html js 循环提示框,纯js超酷消息提示框插件notice.js
notice.js是一款纯js超酷消息提示框插件.notice.js为纯js编写,没有任何依赖文件.通过它可以在页面上制作出漂亮的toast消息通知框效果.该js消息提示框插件的特点还有: 支持4中情 ...
04.tooltip提示框插件，linkbutton按钮插件与progressbar进度条插件
tooltip提示框插件 1 渲染方式 2 属性 3 事件 4 方法 linkbutton按钮插件 21 渲染方式 22 属性 23 方法 progressbar进度条插件 1 渲染方式 2 属性 3 ...
漂亮实用的提示框插件SweetAlert
SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框,它将提示框进行了美化,并且允许自定义,支持设置提示框标题.提示类型.内容展示图片.确认取消按钮文 ...

Modal提示框插件的使用

Modal提示框插件的使用相关推荐

最新文章

热门文章