自定义弹框 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery.js"></script>
        <script>
        function remind(msg){
            var max_width = 950;
            var min_width = 250;
            var font_size = 14;

            /*
             * 遮罩层
             */
            $('body').prepend('<div id="tlj_shade"></div>');
            $('#tlj_shade').css(
                {
                    'position':'fixed',
                    'left':'0',
                    'right':'0',
                    'top':'0',
                    'bottom':'0',
                    'opacity':'0.4',
                    'background':'black'
                }
            );

            /*
             * 弹窗
             */    
            var confirm_pop =  '<div id="tlj_confirm">';    //弹窗HTML结构
                confirm_pop +=         '<div id="confirm_top">'+msg+'</div>';
                confirm_pop +=         '<div id="confirm_bottom">';
                confirm_pop +=             '<div id="button_box" >';
                confirm_pop +=                 '<input type="button" value="确定" name="yes"/>';                        
                confirm_pop +=                 '<input type="button" value="取消" name="no"/>';
                confirm_pop += '        </div>';
                confirm_pop += '    </div>'
                confirm_pop += '</div>';
            $('body').prepend(confirm_pop);    //将弹窗添加进body
            var remind_pop = $('#tlj_confirm');        //弹窗对象
            remind_pop.css(    //弹窗样式
                {    
                    'max-width' : max_width + 'px',
                    'min-width' : min_width + 'px',                    
                    'border':'1px solid black',
                    'position':'absolute',
                    'z-index':'3'
                }
            );

            /*
             * 弹窗信息区
             */
            var confirm_top =  $('#confirm_top'); 
            confirm_top.css(
                {    
                    'text-align' : 'center',
                    'font-size' : font_size+ 'px',
                    'padding' : '45px 20px 35px 20px',                    
                    'background' : 'white',
                    'word-break' : 'break-all'
                }
            );
            if (remind_pop.width() == 950) {
                confirm_top.css(
                    {
                        'text-align' : 'left'
                    }
                );
            }

            //弹窗按钮区
            $('#confirm_bottom').css(
                {
                    'height' : '55px',
                    'background' : '#F2F2F2',
                    'line-height' : '55px',
                    'text-align' : 'center'                
                }
            );
            $('#confirm_bottom input').css(
                {
                    'padding' : '0 15px',
                    'margin' : '0 5px',
                }
            );
            $('#confirm_bottom input[name=yes]').bind('click',function(){    //点"确定"返回true
                $('#tlj_confirm').hide();    //弹窗关闭
                $('#tlj_shade').hide();        //遮罩层关闭
                return true;
            });
            $('#confirm_bottom input[name=no]').bind('click',function(){    //点"取消"返回false
                $('#tlj_confirm').hide();
                $('#tlj_shade').hide();
                return false;
            });


            /*
             * 弹窗位置
             */
             var left = screen.availWidth / 2  - remind_pop.width() / 2;
             var top = (screen.availHeight - 300 - remind_pop.height())/2;
             remind_pop.css(    //弹窗样式
                {    
                    'left' : left + 'px',
                    'top' : top + 'px'
                }
            );    
        }


    </script>
<body>
    <input type="button" value="点" onclick="remind('啊啊啊啊')"/>
</body>
</html>

 

posted @ 2014-08-05 15:10  tlijian1989  阅读(194)  评论(0)    收藏  举报