html页面上promt,js中prompt实现.html

Document

.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: 700;

line-height: 1;

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;

}

/* 提示组件 */

#prompt-wrap{

width:4rem;

height: auto;

line-height: 0.5rem;

padding: 0.2rem 0.3rem;

text-align: center;

background: rgba(0,0,0,0.7);

font-size: 0.3rem;

color: #fff;

position: fixed;

left: 50%;

top: 50%;

margin-left: -2rem;

border-radius: 0.2rem;

z-index: 9999;

display: none;

}

#prompt-wrap span{

display: inline-block;

vertical-align: middle;

line-height: 0.4rem;

}

//构造一个函数，参数为一个对象，实例化时，有值则进行传值，没有则赋值一个空对象

function popAlert( opt ){

this.opt = opt || {};

};

// 显示函数的设置

popAlert.prototype.show = function(){

// $("body").append('

// 创建一个div元素

// var Odiv = document.createElement('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 += " X ";

// 把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';

};

window.onload = function(){

// 新对象实例化及调用show函数

var oAlertInfo = new popAlert({

'class':'alert-info',

'content':'这是信息提示信息，如果你已经知道了，请忽略！'

});

oAlertInfo.show();

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史