手机wap应用alert自写样式

html:

 <div class="myAlertBox">
            <div class="myAlert">
                <div class="myAlertTop"><span>提示</span></div>
                <div class="myAlertMid" id="myAlertText"></div>
                <div class="myAlertBottom">
　　　　　　　　　　　　<span id="myAlertKnow">知道了</span>
　　　　　　　　　　　　<span id="myAlertYes">确定</span>
　　　　　　　　　　　　<span id="myAlertNo">取消</span>   
　　　　　　　　　　</div>
            </div>
 </div>

css:

/*弹窗*/
.myAlertBox{
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 50000;
	top: 0px;
	left: 0px;
	/*display: none;*/
}
.myAlert{
	position: absolute;
	top: 30%;
	width: 250px;
	-webkit-animation: scaleIn .5s 1 ease-out;
	animation: scaleIn .5s 1 ease-out;
}

@-webkit-keyframes scaleIn{
	0%{opacity: 0;  -webkit-transform:scale(0.0);transform:scale(0.0);}
	100%{opacity: 1;-webkit-transform:scale(1.0);transform:scale(1.0);}
}

.myAlertTop{
	padding: 5px 0;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
.myAlertTop>span{
	display: inline-block;
	text-indent: 0.8em;
	color: #fff;
}
.myAlertBottom{
	padding: 10px 0;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	text-align: center;
}
.myAlertBottom>span{
	color: #fff;
	width: 45%;
}
.myAlertTop,.myAlertBottom{
	width: 100%;
	background: #F90;
	color: #fff;
}
.myAlertMid{
	width: 90%;
	background: #fff;
	padding: 20px 5%;
	word-break: break-all;
}
#myAlertKnow{
	/*display: none;*/
}

/*弹窗*/

下面是一个提示框的样式：

css样式：

/*提示信息框*/
.div_details {
    width: 70%;
    opacity: 0.8;
    top: 30%;
    position: fixed;
    background-color: #000;
    color: #fff;
    /*display: none;*/
    text-align: left;
    vertical-align: middle;
    padding: 5% 0%;
    min-height: 100px;
    left: 15%;
    border-radius: 5px;
    z-index: 40004;
    word-break: break-word;
}

.div_details_body {
    width: 80%;
    margin: 0 auto;
}

.iKnow {
    width: 80%;
    height: 35px;
    background: #E33A3D;
    text-align: center;
    margin: 20px 10% 5px 10%;
    display: block;
    padding: 0px;
    border-radius: 5px;
    line-height: 35px;
}

 可用js来控制显示：

 $(document.body).append('<div class="div_details"><div class="div_details_body"></div><a class="iKnow">我知道了</a></div>')