普通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');

?

總結

以上是生活随笔為你收集整理的jsp自定义alert的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。