javascript - 拖放整个 div 容器。 (移动弹出Modal对话框)

Question

这里我有一个模态弹出窗口。我想让模态可拖动。而且我还希望“确定”按钮在悬停时为绿色，“取消”按钮在悬停时应为红色。我可以在单个 css 类中完成吗？

.hidModal{
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.2);
    z-index: 500;
    opacity:2;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
}

.windowModal {
    width: 400px;
    top:15%;
    position: fixed;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background:rgba(255, 204, 153,0.2);
    z-index: 501;
    opacity:0.5;
    background: -moz-linear-gradient(#ffe6cc, #ffa64d);
    background: -webkit-linear-gradient(#ffe6cc, #ffa64d);
    background: -o-linear-gradient(#ffe6cc, #ffa64d);
}

#winMod{
    position: relative;
}

.windowModal:hover{
    opacity: 1.0;
    }


.closeMod {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: 5px;
    text-align: center;
    top: 4px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.closeMod:hover { 
    background: #aaaaaa;
    color: #ff0022;
    cursor: pointer;
}

.bttnMod {
    background: #606061;
    color: #FFFFFF;
    line-height: 15px;
    text-align: center;
    width: 50px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.bttnMod:hover { 
    background: #00d9ff;
    cursor: pointer;
}

<div class="hidModal">
    <div id="winMod" class="windowModal">
    
        <div  style="margin-top: 1%;">
        <input class="closeMod" type="button" name="Close" value="X" style="width:8%" onclick="winClose();" >
            
        <div style="margin-top: 1%;">
            <label class="label lblwidth1">&nbsp;</label>
            <input class="bttnMod" type="button" name="OK" value="OK" onclick="clickok();" tabindex="1" style="width:50">
            <input class="bttnMod" type="button" name="Cancel" value="Cancel" tabindex="2" style="width:55" onclick="winClose();">
        </div>
    </div>
  </div>

我尝试了一些可行的方法。但它没有用。那些在 jQuery 中。但我对此了解不多。所以请帮我解决这个问题。在此先感谢您的帮助。

Answer 1

对于可拖动部分，如果您使用的是 JQuery，则为 Draggable属性(property)。

$("#your-modal").draggable(); 

您还可以指定将属性分配给模态框的哪一部分(在此示例中，模态框的标题)。

$("#your-modal").draggable({ handle: "#your-modal-header" });

至于按钮，您可以更改它们的背景颜色并使用 :hover 选择器添加一些过渡动画。尽管我认为最好按如下所示分别处理它们的类。

ok-button:hover {
  background-color: green;
  transition: 0.5s;
}

cancel-button:hover {
  background-color: red;
  transition: 0.5s;
}

片段:

.hidModal {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.2);
    z-index: 500;
    opacity:2;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
}

.windowModal {
    width: 400px;
    top:15%;
    position: fixed;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background:rgba(255, 204, 153,0.2);
    z-index: 501;
    opacity:0.5;
    background: -moz-linear-gradient(#ffe6cc, #ffa64d);
    background: -webkit-linear-gradient(#ffe6cc, #ffa64d);
    background: -o-linear-gradient(#ffe6cc, #ffa64d);
}

#winMod {
    position: relative;
}

.windowModal:hover {
    opacity: 1.0;
}


.closeMod {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: 5px;
    text-align: center;
    top: 4px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.closeMod:hover { 
    background: #aaaaaa;
    color: #ff0022;
    cursor: pointer;
}

.bttnMod {
    background: #606061;
    color: #FFFFFF;
    line-height: 15px;
    text-align: center;
    width: 50px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.ok-button:hover { 
    background-color: green;
  transition: 0.5s;
}

.cancel-button:hover { 
    background-color: red;
  transition: 0.5s;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<div id="your-modal" class="hidModal">
    <div id="winMod" class="windowModal">
        <div style="margin-top: 1%;">
            <input class="closeMod" type="button" name="Close" value="X" style="width:8%" onclick="winClose();">
            <div style="margin-top: 1%;">
                <label class="label lblwidth1">&nbsp;</label>
                <input class="ok-button bttnMod" type="button" name="OK" value="OK" onclick="clickok();" tabindex="1"
                    style="width:50">
                <input class="cancel-button bttnMod" type="button" name="Cancel" value="Cancel" tabindex="2" style="width:55"
                    onclick="winClose();">
            </div>
        </div>
    </div>
</div>

<script>
    $("#your-modal").draggable(); 
</script>

---

编辑:

对于无需包含 JQuery/JQueryUI(即纯 Javascript)的解决方案，您可以按照以下代码片段进行引用。添加了一些评论，因为与上面的代码片段相比，它有相当多的额外代码行。

// Get your modal by it's ID and declare it as a variable
var modal = document.getElementById('your-modal');
// Declare variables for X and Y positions of your modal and mouse movements
var posX, posY, mouseX, mouseY;

// Triggers when the user clicks and holds the mouse down on your modal
modal.addEventListener('mousedown', function (event) {
    posX = this.offsetLeft;
    posY = this.offsetTop;
    mouseX = event.clientX;
    mouseY = event.clientY;

    // Triggers when the user moves the mouse around as it's holding the click down
    this.addEventListener('mousemove', moveElement, false);

    // Triggers when the user lets go of the mouse
    window.addEventListener('mouseup', function () {
        modal.removeEventListener('mousemove', moveElement, false);
    }, false);

}, false);

// Function in charge of repositioning the modal
function moveElement(event) {
    this.style.left = posX + event.clientX - mouseX + 'px';
    this.style.top = posY + event.clientY - mouseY + 'px';
}

.hidModal {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 500;
    opacity: 2;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
}

.windowModal {
    width: 400px;
    top: 15%;
    position: fixed;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: rgba(255, 204, 153, 0.2);
    z-index: 501;
    opacity: 0.5;
    background: -moz-linear-gradient(#ffe6cc, #ffa64d);
    background: -webkit-linear-gradient(#ffe6cc, #ffa64d);
    background: -o-linear-gradient(#ffe6cc, #ffa64d);
}

#winMod {
    position: relative;
}

.windowModal:hover {
    opacity: 1.0;
}


.closeMod {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: 5px;
    text-align: center;
    top: 4px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.closeMod:hover {
    background: #aaaaaa;
    color: #ff0022;
    cursor: pointer;
}

.bttnMod {
    background: #606061;
    color: #FFFFFF;
    line-height: 15px;
    text-align: center;
    width: 50px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.ok-button:hover {
    background-color: green;
    transition: 0.5s;
}

.cancel-button:hover {
    background-color: red;
    transition: 0.5s;
}

<div id="your-modal" class="hidModal">
    <div id="winMod" class="windowModal">
        <div style="margin-top: 1%;">
            <input class="closeMod" type="button" name="Close" value="X" style="width:8%" onclick="winClose();">
            <div style="margin-top: 1%;">
                <label class="label lblwidth1">&nbsp;</label>
                <input class="ok-button bttnMod" type="button" name="OK" value="OK" onclick="clickok();" tabindex="1"
                    style="width:50">
                <input class="cancel-button bttnMod" type="button" name="Cancel" value="Cancel" tabindex="2"
                    style="width:55" onclick="winClose();">
            </div>
        </div>
    </div>
</div>