自定义alert()弹出框

最新推荐文章于 2020-12-03 23:35:14 发布

hedan_hd

最新推荐文章于 2020-12-03 23:35:14 发布

阅读量6.6k

点赞数

分类专栏： web开发文章标签： class function input button filter border

本文链接：https://blog.csdn.net/hedan_hd/article/details/7872996

版权

web开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

css样式：

.dailogboxbg{position:absolute; z-index:9;width:100%; height:100%; filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000', endColorstr='#99000000');background-color: rgba(0,0,0,0.5);}
.alert22{top:40%;left:40%;text-align:center;border:1px solid #336699;width:300px;z-index:1000;position:absolute;
border-radius:8px 8px 8px 8px; -moz-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px;background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#AFC3CF)); background-image: -moz-linear-gradient(center top, #FFFFFF, #AFC3CF); cursor:pointer; background-image:linear-gradient(center top, #FFFFFF, #AFC3CF);
-moz-box-shadow:1px 1px 10px rgba(0, 0, 0, 0.8);box-shadow:1px 1px 10px rgba(0, 0, 0, 0.8); -webkit-box-shadow:1px 1px 10px rgba(0, 0, 0, 0.8); color:#666666;}
.alert22 h4 {height:20px;background:#369;color:#fff;padding:5px 0 0 5px;}
.alert22 h4 span {float:left;}
.alert22 h4 span#close22 {margin-right: 10px;float:right;font-weight:500;cursor:pointer;background-image:url(../images/close2.png); background-repeat:no-repeat;width:9px;height:9px;}
.alert22 h4 span#close22:hover{ background-image:url(../images/close1.png); background-repeat:no-repeat;}
.alert22 p {margin:20px auto; width:300px;}
.alert22 p input{width:140px;}
.alert22 p input.myinp {border:1px solid #ccc;height:23px;}
.alert22 p input.sub{font-size: 14px;height: 26px;border: 1px solid #336699;width:80px;border-radius:8px 8px 8px 8px; -moz-border-radius:8px 8px 8px 8px;
-webkit-border-radius:8px 8px 8px 8px; height:26px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6abbec), to(#1b6591));
background-image: -moz-linear-gradient(center top, #6abbec, #1b6591); cursor:pointer; background-image:linear-gradient(center top, #6abbec, #1b6591);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
text-align:center; color:#fff; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.8); }

jsp:

<div id="alertDiv" style="display:none" class="dailogboxbg">
   <div class="alert22">
       <h4><span>Tips</span><span id="close22" οnclick="closeMe();">    </span></h4>
       <p>请输入目标词!</p>
        <p>
           <input type="button" value="关闭" class="sub" οnclick="closeMe();"/>
       </p>
   </div>
</div>

jquery:

function show()

{

$('#alertDiv').show();

}

function closeMe()

{

$('#alertDiv').hide();

}