拖放或替换整个 div 容器。拖动弹出的Modal

Question

所以这里我有一个模态弹出窗口。我想让模态可拖动。我还希望 "Ok" 按钮在悬停时为绿色，"cancel" 按钮在悬停时应为红色。我可以单次完成 css class?

.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

这是允许您使 div 可拖动的插件之一。但是对于不同的背景颜色，我不确定是否可以使用相同的 class 名称。

$( function() {
    $( "#winMod" ).draggable();
  });

.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<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" id="OK" type="button" name="OK" value="OK" onclick="clickok();" tabindex="1" style="width:50">
      <input class="bttnMod" id="Cancel" type="button" name="Cancel" value="Cancel" tabindex="2" style="width:55" onclick="winClose();">
     </div>
    </div>
  </div>

Answer 2

对于可拖动部分，如果您使用 JQuery，则有 Draggable 属性.

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

您还可以指定将属性分配给模态框的哪一部分（在此示例中，模态框的 header）。

$("#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>

Answer 3

这给出了准确的输出。

dragElement(document.getElementById("parnt"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

.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;
    position: relative;
    margin: 10% auto;
    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);
}

#parnt{
   position: absolute;
    z-index: 10;
    color: #fff;
    z-index: 10;
    top: 40%;
    bottom: 85%;
    left: 15%;
    right: 50%;
}

.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="parnt">
    <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>
  </div>

这符合我的预期。

拖放或替换整个 div 容器。拖动弹出的Modal

Drag and Drop or replace the whole div container. Drag the pop-up Modal

html

javascript

css

jquery

drag-and-drop