jsp自定义alert

普通alert

 alert(data.msg);

自定义alert

1、创建弹出框div

 <!--弹出框--------------------------->
           <div id="alert_div" align="center">
                   <div align="left">操作提示</div>
                   <div align="center">context</div>
                   <div align="right">
                     <!-- <a href="javascript:;">确定</a> -->
                     <button id="alertbutton">确定</button>
                    </div>
           </div>

 

2、定义样式以及初始化隐藏alert

    <script type="text/javascript">
           $(function(){

       $('.background,#alert_div').hide();

                 //position:fixed; absolute
                 $('#alert_div').css('width',300).css('height',120).css('border','0.1px solid #666666')
                 .css('position','fixed').css('left',$(this).width()/2.5).css('top',$(this).height()/2.5)
                 .css('z-index','120').css('background-color','#ffffff').css('border-radius','5px');
                 $('#alert_div div:eq(0)').css('margin-left','10px').css('margin-top','10px').css('text-decoration','underline');
                 $('#alert_div div:eq(2)').css('margin-top','25px').css('margin-right','10px');
                 $('#alert_div div:eq(2) button').click(function(){
                         $('.background').fadeOut(150);
                         $('#alert_div').fadeOut(350);
                 });
                 $('#alert_div div:eq(1)').css('margin-top','10px');

 

             });
  </script>

 

3、同样在script里面。点击事件、设置alert内容。显示alert

  $('#alert_div div:eq(1)')
                                .text(''+data.msg).css('color','red');
                                 $('#alert_div').fadeIn('150');