不用alert，js写弹出框

原创已于 2022-01-25 10:52:02 修改 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web前端

于 2018-03-27 16:06:47 首次发布

这篇博客介绍了如何在不使用alert的情况下，利用HTML、CSS和JavaScript来创建自定义的弹出提示框。通过展示具体的代码实现，作者详细解释了如何定义样式和触发弹出框的逻辑，为前端开发者提供了一种更灵活的提示用户信息的方法。

html代码：

<script src="../js/jquery.min.js"></script>

<!--评论内容框-->
 <div id="toWrite" style="display: none">
     <textarea  class="toWrite1"  rows="10" id="toWrite1"></textarea>
     <input id="postBt" type="button" value="发布" @click="post"/>
 </div>

<div id="notNull" style="display: none">留言不能为空!!</div>

css代码：

#notNull{
    position: absolute;
    left:33%;
    top:45%;
    width:2.78rem;
    height:0.7rem;
    color:red;
    border-radius:2px;
    background-color: #B3B3B3;
    line-height: 0.7rem;
    text-align: center;
    font-size: 0.3rem;
    z-index: 96;
}

javascript代码：

var content=document.getElementById("toWrite1").value;
//判断留言内容是否为空
function isNull( str ){
    if ( str == "" ) return true;
    var regu = "^[ ]+$";
    var re = new RegExp(regu);
    return re.test(str);
}
var result=isNull(content);
//console.log(result);
if(content.toString().length==0||content==" "||result==true){
    $("#notNull").show();
    setTimeout(function(){$("#notNull").hide();},3000);//3秒后执行该方法
    return;
}