鼠标拖拽移动子窗体的JS实现

前端技术 2023/09/09 JavaScript

1.子窗体

在设计网站的时候，我们需要设计一些模态的子窗体，比如

这一步很容易实现，只需要div+css就ok了，请看代码：

复制代码 代码如下:

    <div class=\"modal-background\"></div>
    <div class=\"modal-window\">
        <div class=\"head\">
            <center>点住着块区域可以改变我的位置</center>
        </div>
    </div>

复制代码 代码如下:

.modal-background
{
    background-color: #999999;
    bottom: 0;
    left: 0;
    opacity: 0.3;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1100;
}

.modal-window
{
    background-color: #FFFFFF;
    border: 1px solid #6B94AD;
    box-shadow: 5px 5px 5px #6B94AD;
    font-family: \'Microsoft YaHei\';
    font-size: 12px;
    height: 120px;
    left: 50%;
    margin-left: -160px;
    margin-top: -160px;
    opacity: 1;
    position: fixed;
    top: 50%;
    width: 320px;
    z-index: 1110;
}

    .modal-window .head
    {
        height: 25px;
        color: #fff;
        font-weight: 600;
        background-image: -moz-linear-gradient(top, #4A8CC5, #2963A5); /* Firefox */
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4A8CC5), color-stop(1, #2963A5)); /* Saf4+, Chrome */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#4A8CC5\', endColorstr=\'#2963A5\', GradientType=\'0\'); /* IE*/
    }

        .modal-window .head center
        {
            padding-top: 2px;
        }

本文地址：https://www.stayed.cn/item/24914

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案