div使用jquery从页面顶部滑动到中心

时间:2015-10-19 08:14:55

标签: javascript jquery css slide slidetoggle

我需要将div从页面顶部向下滑动到中心。我试过(请检查代码),但它是从按钮滑向下。我需要的是,当我点击按钮,一个div滑动从页面顶部到中心。当我点击关闭按钮,它应该关闭div 。请给我一些建议或参考链接。

<div id="divtbl" >
<table style="width:100%">
    <tr>
        <td>
            Table Names
        </td>

    </tr>
    <tr>
        <td>
            Table Names 1
        </td>

    </tr>
   <tr>
        <td>
            <input type="button" value="Add New Feild" onclick="addnewrow()" />
        </td>

    </tr>
</table>
    </div>
<div id="divpopup" style="display:none;"  class="pop">
    <table style="width:100%">
    <tr>
        <td>
            display Names
        </td>

    </tr>
    <tr>
        <td>
            display Names 1
        </td>

    </tr>
    <tr>
        <td>
            display Names 2
        </td>

    </tr>

</table>
</div>


<style type="text/css">
    .pop
    {
        font-size:12px;
        top:0px;
        position:absolute;    
    }
</style>
 <script type="text/javascript">
    function addnewrow() {
        try
        {
            $("#divpopup").slideToggle("slow");
        }
        catch (e) {
            alert(e.message);
        }
    }
   </script>

1 个答案:

答案 0 :(得分:0)

尝试将弹出窗口放在页面中央 -

.pop
{
    font-size:12px;
    top:40%;
    left:40%;
    position:absolute;    
}