1. 程式人生 > >jsp自定義alert

jsp自定義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');