0

ページの中央下に固定されている小さなdivがあります。今、私は最初にdivが表示されないようにしたいです。ユーザーがボタンをクリックすると、divはブラウザの下端から上にスライドし、ユーザーがボタンをもう一度クリックすると、divは下にスライドします。

この方法で試しましたが、サンプルコードが正しく機能しません

 #BusyBox
{
background: -moz-linear-gradient(center top , #F1F2F2 0%, #F1F2F2 100%) repeat scroll 0 0 transparent;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
bottom: 0;
font-size: 0.8em;
font-style: normal;
font-weight: normal;
left: 50%;
margin-left: -45px;
padding-top: 20px;
position: fixed;
text-align: center;
width: 90px;
height: 50px;
margin-top: -50px;
background-repeat:no-repeat;
background-position: center center;
}

<script type="text/javascript">
    $(document).ready(function () {
        var flag = 1;

        $("#Process").click(function () {
            if (flag == 1) {
                $('#BusyBox').stop(true).animate({ 'marginTop': '50px', 'opacity': '0' }, { queue: false, duration: 300 });
                flag = 0;
            }
            else {
                $('#BusyBox').stop(true).animate({ 'marginTop': '-50px', 'opacity': '1' }, { queue: false, duration: 300 });
                flag = 1;
            }

            return false;
        });
    });
</script>

<asp:Button ID="Process" runat="server" Text="Click" />
<div id="BusyBox" >
    <img src="images/loader.gif"  alt="Loading..."/>
    <div>
    <em>Loading Wait...</em>
    </div>
</div>

私のコードが間違っているところを助けてください。ありがとう

4

1 に答える 1

2

margin-bottomdivがページの下部に配置されているので作業します。このフィドルを見てください：

http://jsfiddle.net/SpMns/

于 2012-06-19T11:50:12.847 に答える