当前位置：首页 → 问答吧 → 翻译learningJquery.com上一篇关于弹出对话框效果的文章

翻译learningJquery.com上一篇关于弹出对话框效果的文章

时间：2009-06-10

来源：互联网

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="jquery-1.3.2.js">
        </script>
        <style type="text/css">
            .quick-alert {
                width: 200px;
                margin: 1em 60px;
                padding: .5em;
                background: #000000;
                border: 0px solid #300;
                color: #ffffff;
                font-weight: bold;
                display: none;
                z-index:100;
            }
        </style>
        <script type="text/javascript">

            $(document).ready(function(){
                $('#show-alert').click(function(){
                    $('<div class="quick-alert">弹出一条消息，然后消息自动隐藏，机制是删掉自己</div>')
                    .insertAfter($(this))
                    .fadeIn('slow')
                    .animate({opacity: 10.0}, 3000)
                    .fadeOut('slow', function(){ $(this).remove();});
                });
            });
        </script>
    </head>
    <body>
        <input type="submit" id="show-alert" value="点我" />

    </body>
</html>

作者: yangmaomao 发布时间: 2009-06-10

效果还不错，以后随时翻译文章过来给大家看

作者: yangmaomao 发布时间: 2009-06-10

不错..又学了...新手很合适...