弹出框提醒

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lp15203883326/article/details/84784462

 html代码：

<%--开通一次性订阅消息对话框--%>
<div class="gray_bg" hidden="hidden">
    <div style="margin-top: 25%;">
    <div class="feedback_dialog">
        <div class="feedback_frame_img"><img src="http://images0.zaijiawan.com/wechat/ui/msg.png@!ori"></div>
        <div class="feedback_frame_font">
            <p>感谢您的反馈~我们一定会及时改进的~</p>
               <p>祝您生活愉快</p>
        </div>
        <div class="feedback_dialog_content">
            <div class="feedback_tips">开通提醒，有新回复的话可以第一时间反馈您哦~</div>
            <div class="feedback_btn_group">
                <a style="width: 40%;margin-right: 10%;" href="${pageContext.request.contextPath}/goodsArticle/showArticle?recommendItemId=${itemId}">
                    <button class="feedback_btn_left" onclick="">拒绝</button></a>
                <a style="width: 40%;" id="openMsg"><button class="feedback_btn_right">开通微信提醒</button></a>
            </div>
        </div>
    </div>
    </div>
</div>

弹框被某个事件触发： 

 function checkFeedbackAndSubmit() {
       var content = $("#content").val();
       if(content == "" || content.length<=0){
           alert("您还没有填写意见哦～");
       }else{
           $(".gray_bg").show();
           submitForm(content);
       }

     }

相关css：

.gray_bg{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top: 0px;
    left: 0px
;
}
.feedback_dialog{
    background: #FF6969;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: center;
    margin-left: 38px;
    margin-right: 38px;
    text-align: center;

}
.feedback_frame_img{
    margin-top: 20px;
}

.feedback_frame_img img{
    width: 94px;
    height: 60px;
}
.feedback_frame_font{
    margin-top: 23px;
    font-size: 15px;
    font-weight: 200;
    color: rgba(255,255,255,1);
    line-height: 30px;
}

.feedback_content_div{

}
.feedback_dialog_content{
    background: #FFFFFF;
    width: 100%;
}
.feedback_tips{
    height: 42px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(102,102,102,1);
    line-height: 20px;
    margin-top: 20px;
    margin-left: 15px;
    margin-right: 15px;
}
.feedback_btn_group{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.feedback_btn_left{
    width: 100%;
    height: 35px;
    font-size: 15px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153,153,153,1);
    line-height: 21px;
    border-radius: 2px;
    border: 1px solid #D8D8D8;
    background: rgba(255,255,255,1);

}

.feedback_btn_right{
    width: 100%;
    height: 35px;
    font-size: 15px;
    font-weight: 400;
    background: rgba(255,105,105,1);
    border-radius: 2px;
    color: rgba(255,255,255,1);
    line-height: 21px;
    border: none;
}

 应该就这些