js 提示框的实现---组件开发之（二）
接着第上一个，在js文件里再增加一个 popModal 模块，实现弹框效果
css 代码：
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert .close {
text-decoration: none;
float: right;
font-size: 21px;
font-weight:;
line-height:;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
.modal.fade .modal-dialog {
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
transform: translate(0, -25%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.modal-backdrop {
position: fixed;
top:;
right:;
bottom:;
left:;
z-index:;
background-color: #000000;
}
.modal-backdrop.fade {
opacity:;
filter: alpha(opacity=0);
}
.modal-backdrop.in {
opacity: 0.5;
filter: alpha(opacity=50);
}
.fade {
opacity:;
-webkit-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.fade.in {
opacity:;
}
.modal.fade .modal-dialog {
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
transform: translate(0, -25%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.modal-dialog {
position: relative;
z-index:;
width: auto;
padding: 10px;
margin-right: auto;
margin-left: auto;
}
.modal-content {
position: relative;
background-color: #ffffff;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
outline: none;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
background-clip: padding-box;
}
.modal-header {
min-height: 16.428571429px;
padding: 15px;
border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
margin-top: -2px;
}
.close:focus, .close:hover {
color: #000;
text-decoration: none;
cursor: pointer;
filter: alpha(opacity=50);
opacity: .5;
}
button.close {
-webkit-appearance: none;
padding:;
cursor: pointer;
background: 0 0;
border:;
}
.close {
float: right;
font-size: 21px;
font-weight:;
line-height:;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
}
.modal-title {
margin:;
line-height: 1.428571429;
}
.modal-body {
position: relative;
padding: 20px;
}
.modal-footer {
padding: 19px 20px 20px;
margin-top: 15px;
text-align: right;
border-top: 1px solid #e5e5e5;
}
.modal-footer:before,
.modal-footer:after {
display: table;
content: " ";
}
.modal-footer:after {
clear: both;
}
.modal-footer:before,
.modal-footer:after {
display: table;
content: " ";
}
.modal-footer:after {
clear: both;
}
.modal-footer .btn + .btn {
margin-bottom:;
margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
margin-left:;
}
@media screen and (min-width: 768px) {
.modal-dialog {
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);
}
}
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css/layout1.css">
<script src="./js/layout.js"></script>
<script>
window.onload = function(){
// 新对象实例化及调用show函数
var oModal = new huanying2015.popModal({
title : '你好',
content : '这是模态框的内容,这是模态框的内容这是模态框的内容'
});
oModal.show();
}
</script>
</head>
<body>
</body>
</html>
js代码：
;(function(window,undefined){
//构造一个函数，参数为一个对象，实例化时，有值则进行传值，没有则赋值一个空对象
function popAlert( opt ){
this.opt = opt || {};
};
// 显示函数的设置
popAlert.prototype.show = function(){
// 创建一个div元素
var Odiv = document.createElement('div');
var that = this;
var aclose ;
// 给div添加class属性，这里使用的是多个属性的添加，同时将opt的class传递过来
Odiv.classList.add('alert',this.opt['class']||'' );
// 设定div包含的内容
Odiv.innerHTML = this.opt['content'] || '';
Odiv.innerHTML += "<a href='javascript:;' class='close'> X </a>";
// 把div元素整体插入body内，appendChild是插在最后面
document.body.appendChild(Odiv);
aclose = document.querySelectorAll('.alert > .close');
// 点击close按钮，则影藏此按钮的父级元素
aclose.forEach(function(val){
val.addEventListener( 'click',function(){
that.hide( this.parentNode );
});
});
};
// 影藏函数设置
popAlert.prototype.hide = function( obj ){
obj.style.display = 'none';
};
function popModal( opt ){
this.opt = opt || {};
};
popModal.prototype.show = function(){
var modalHtml = "<div class='modal fade'>";
modalHtml += "<div class='modal-dialog'>";
modalHtml += "<div class='modal-content'>";
modalHtml += "<div class='modal-header'>";
modalHtml += "<button type='button' class='close'> X </button>";
modalHtml += "<h4 class='modal-title'>" + (this.opt['title']||'') + "</h4>";
modalHtml += "</div>";
modalHtml += "<div class='modal-body'>" + (this.opt['content']||'') + "</div>";
modalHtml += "<div class='modal-footer'><button type='button'> 确认 </button></div>";
modalHtml += "</div>";
modalHtml += "</div>";
modalHtml += "</div>";
modalHtml += "<div class='modal-backdrop in'></div>";
document.body.innerHTML = modalHtml;
var oModal = document.querySelector(".modal");
oModal.classList.add('in');
oModal.style.display = 'block';
var oClose = document.querySelector(".modal .close");
var obtn = document.querySelector('.modal .modal-dialog .modal-content .modal-footer button');
var that = this ;
oClose.addEventListener('click',function(){
that.hide(this);
});
obtn.addEventListener('click',function(){
that.hide(this);
});
}
popModal.prototype.hide = function( obj ){
var objParents = findNode(obj);
objParents.style.display = 'none';
document.body.removeChild(document.querySelector(".modal-backdrop"));
};
function findNode( obj ){
var aClass ;
while( obj = obj.parentNode){
aClass = Array.prototype.slice.call( obj.classList );
if( aClass.length && /modal/.test( aClass[0] )&& aClass[0].length ==5 ){
break;
}
};
return obj;
};
// 设置一个空对象：huanying2015
var huanying2015 = {};
// 把popAlert和popModal 挂在huanying2015下面
huanying2015 = {
'popAlert' : popAlert,
'popModal' : popModal
};
// 然后把huanying2015挂在window 对象下面，这样就可以在外面使用huanying2015调用popAlert 了
window.huanying2015 = huanying2015;
})(window,undefined);
运行结果：
对于js部分，还可以再次进行封装：调用时直接填入模态框的内容进行调用
css部分：与上面的一样，不动
js部分：在原先的立即执行表达式函数后面封装一个函数 show_popModal();
;(function(window,undefined){
//构造一个函数，参数为一个对象，实例化时，有值则进行传值，没有则赋值一个空对象
function popAlert( opt ){
this.opt = opt || {};
};
// 显示函数的设置
popAlert.prototype.show = function(){
// 创建一个div元素
var Odiv = document.createElement('div');
var that = this;
var aclose ;
// 给div添加class属性，这里使用的是多个属性的添加，同时将opt的class传递过来
Odiv.classList.add('alert',this.opt['class']||'' );
// 设定div包含的内容
Odiv.innerHTML = this.opt['content'] || '';
Odiv.innerHTML += "<a href='javascript:;' class='close'> X </a>";
// 把div元素整体插入body内，appendChild是插在最后面
document.body.appendChild(Odiv);
aclose = document.querySelectorAll('.alert > .close');
// 点击close按钮，则影藏此按钮的父级元素
aclose.forEach(function(val){
val.addEventListener( 'click',function(){
that.hide( this.parentNode );
});
});
};
// 影藏函数设置
popAlert.prototype.hide = function( obj ){
obj.style.display = 'none';
};
function popModal( opt ){
this.opt = opt || {};
};
popModal.prototype.show = function(){
var modalHtml = "<div class='modal fade'>";
modalHtml += "<div class='modal-dialog'>";
modalHtml += "<div class='modal-content'>";
modalHtml += "<div class='modal-header'>";
modalHtml += "<button type='button' class='close'> X </button>";
modalHtml += "<h4 class='modal-title'>" + (this.opt['title']||'') + "</h4>";
modalHtml += "</div>";
modalHtml += "<div class='modal-body'>" + (this.opt['content']||'') + "</div>";
modalHtml += "<div class='modal-footer'><button type='button'> 确认 </button></div>";
modalHtml += "</div>";
modalHtml += "</div>";
modalHtml += "</div>";
modalHtml += "<div class='modal-backdrop in'></div>";
document.body.innerHTML = modalHtml;
var oModal = document.querySelector(".modal");
oModal.classList.add('in');
oModal.style.display = 'block';
var oClose = document.querySelector(".modal .close");
var obtn = document.querySelector('.modal .modal-dialog .modal-content .modal-footer button');
var that = this ;
oClose.addEventListener('click',function(){
that.hide(this);
});
obtn.addEventListener('click',function(){
that.hide(this);
});
}
popModal.prototype.hide = function( obj ){
var objParents = findNode(obj);
objParents.style.display = 'none';
document.body.removeChild(document.querySelector(".modal-backdrop"));
};
function findNode( obj ){
var aClass ;
while( obj = obj.parentNode){
aClass = Array.prototype.slice.call( obj.classList );
if( aClass.length && /modal/.test( aClass[0] )&& aClass[0].length ==5 ){
break;
}
};
return obj;
};
// 设置一个空对象：huanying2015
var huanying2015 = {};
// 把popAlert 挂在huanying2015下面
huanying2015 = {
'popAlert' : popAlert,
'popModal' : popModal
};
// 然后把huanying2015挂在window 对象下面，这样就可以在外面使用huanying2015调用popAlert 了
window.huanying2015 = huanying2015;
})(window,undefined);
// 这里再次进行封装 popModal
function show_popModal( content ){
var Opop = new huanying2015.popModal({
'title':"huanying2015 提示您",
'content':content
});
return Opop.show();
};
html部分： 注意，下面是直接调用show_popModal()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css/layout1.css">
<script src="./js/layout.js"></script>
<script>
window.onload = function(){ show_popModal('这里是地球，火星人，欢迎您们来旅游！');
}
</script>
</head>
<body>
</body>
</html>
运行结果：
js 提示框的实现---组件开发之（二）的更多相关文章
- js 提示框的实现---组件开发之（一）
自己做了一个简单的提示框,供自己使用,也可以供他人参考,看懂此文,是理解组件开发的入门 思路比较简单: 1.常规写法: 1.1. 创建一个构造函数 1.2. 给构造函数的原型对象添加show 和hid ...
- 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- 弹出JS提示框
弹出JS提示框Page.ClientScript.RegisterStartupScript(typeof(string), "msg", "<script> ...
- [UIKit学习]04.关于HUD提示框，定时任务、开发关于资源常见问题
提示框的背景透明此时要设置background的Alpha值 定时任务 方法1:performSelector // 1.5s后自动调用self的hideHUD方法 [self performSele ...
- 【js+jquery】通用、简单的JS 提示框
1.该插件不需要依赖 jquery,仅仅使用了原生js 2.简单.通用.可自定义修改样式.支持等待N秒消失.支持消失后跳转其他url , 功能还是比较完善的. 3.不废话,上代码: (我存放的位置在 ...
- js面向对象（三）---组件开发
一.对象的多种表现形式 1.提高对象的复用性 2.如何配置参数和默认参数 不知道该怎么描述,就直接上代码吧,下面做了2个例子,重点看整个组件的大体结构 用组件的方式做拖拽窗口,你可以狠狠的点击这里进行 ...
- JS 提示框 alert()、confirm()、prompt()的三者的区别
使用消息框 使用警告.提示和确认 可以使用警告.确认和提示消息框来获得用户的输入.这些消息框是 window 对象的接口方法.由于 window 对象位于对象层次的顶层,因此实际应用中不必使用这些消息 ...
- 简单的js提示框,仅仅用jq和css就可以
首先定义一个盒子 1 .pop { 2 position: fixed; 3 top: 20%; 4 left: 50%; 5 transform: translate(-50%); 6 width: ...
- JS添加MD5，JS提示框
http://pan.baidu.com/s/1kTmSp9t
随机推荐
- jQuery中的跨域问题
jQuery中的Ajax的跨域问题 jsonp跨域问题:回调函数中的字符串: cb或callback jsonpcallback:跟的是cb后面的函数,主要自己写: 数据中的函数fn(数据) 目前是这 ...
- KafkaAPI实战
新旧API使用 Flume和Kafka集成: Kafka有两套API: 过时的API 和新API 准备工作 <dependencies> <dependency> <gr ...
- Service 和 IntentService的区别；
Srevice不是在子线程,在Srevice中做耗时操作一样ANR,然后我们就会用到IntentService,IntentSrevice不但擅长做耗时操作,还有一个特点,用完即走: 在Srevice ...
- MySQL ERROR 1300 (HY000): Invalid utf8 character string
load data报错 原因:原始数据含有 中文\中文 这样的带斜线的字符串. 解决方案:导出的时候替换 replace(d.role_name,'\\','.' ),这样导入时候就不用处理了
- Python网络爬虫之requests模块
今日内容 session处理cookie proxies参数设置请求代理ip 基于线程池的数据爬取 知识点回顾 xpath的解析流程 bs4的解析流程 常用xpath表达式 常用bs4解析方法 引入 ...
- bool操作
基本类型转换的问题 bool类型没有操作. 类型转换 结论一: 想把xxx转化成yy类型. yy(xxx) 结论二: 能够表示False的数据: 0, "", [], {}, se ...
- 下雨天，适合学「Spring Boot」
北方的闷热,让不少小伙伴盼着下雨,前几天北京下了场大雨,杭州也紧跟这下了场雨,就在昨天原本还很闷热的天,突然就飘泼大雨了.今天也断断续续的下着小雨,一觉醒来已经是10点了.有句话说:懒惰是人的天性 ...
- Enterprise Library
https://msdn.microsoft.com/en-us/library/ff648951.aspx
- Ruby学习笔记7: 添加身份验证（adding Authentication）
我们已经完成了Category & Product页面内容的增删改查,再加入一个身份验证即可成为一个较完整的Rails App了.本文就来完成这个任务. We now need to give ...
- 30.Scrapy 对接 Selenium
Scrapy 对接 Selenium(参考代码网址,https://github.com/Python3WebSpider/ScrapySeleniumTest) 此文就是参考书上的代码拿下来跑,作为 ...