jquery 拖放整个div容器,(移动弹出模式对话框)

y0u0uwnf  于 2023-03-01  发布在  jQuery
关注(0)|答案(4)|浏览(123)

这里我有一个模态弹出窗口。我想使模态拖动。我也希望"确定"按钮是绿色的悬停和"取消"应该是红色的悬停。我有可能在单一的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中。但是我在这方面没有太多的知识。所以请帮助我解决这个问题。提前感谢你的帮助。

jquery

4条答案

按热度按时间
blpfk2vs

blpfk2vs1#

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

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

片段：
一个三个三个一个

编辑：

对于一个不需要包含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>
赞(0）分享  回复(0）举报  2023-03-01
xuo3flqw

xuo3flqw2#

这是一个插件，可以让你把div变成可拖动的。但是对于不同的背景颜色，我不确定用相同的类名是否可行。

$( 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>
赞(0）分享  回复(0）举报  2023-03-01
pgccezyw

pgccezyw3#

这将给出准确的输出。

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>

这和我预期的一样有效。

赞(0）分享  回复(0）举报  2023-03-01
p8h8hvxi

p8h8hvxi4#

这是一个纯JavaScript的例子。点击并移动标题来移动弹出窗口本身。它将停留在父容器中。

var offset = [0, 0];
var isDown = false;

var headerElement = document.getElementById("#PopupHeader");
var popupElement = document.getElementById("#PopupMainDiv");
if (headerElement && popupElement) {

  // On MouseDown event callback
  var mouseDown = function(event) {
    event.stopPropagation();
    event.preventDefault();
    isDown = true;
    if (popupElement) {
      popupElement.addEventListener("mousemove", mouseMove);
      popupElement.addEventListener("mouseup", mouseUp);
      offset = [
        event.clientX,
        event.clientY
      ];
    }
  }

  // On MouseUp event callback
  var mouseUp = function() {
    isDown = false;
    if (popupElement) {
      popupElement.removeEventListener("mousemove", mouseMove);
      popupElement.removeEventListener("mouseup", mouseUp);
    }
  }

  // On MouseMove event callback
  var mouseMove = function(event) {
    if (isDown) {
      if (popupElement.parentElement) {
        let newX = offset[0] - event.clientX;
        let newY = offset[1] - event.clientY;
        const rect = popupElement.getBoundingClientRect();
        const boundaries = 
        popupElement.parentElement.getBoundingClientRect();
        const x = Math.min(
            Math.max(boundaries.left, rect.left - newX), 
            boundaries.right - rect.width
          ),
          y = Math.min(
            Math.max(boundaries.top, rect.top - newY), 
            boundaries.bottom - rect.height
          );
        popupElement.style.left = `${x}px`;
        popupElement.style.top = `${y}px`;
        offset = [
          event.clientX,
          event.clientY
        ];
      }
    }
  }
  headerElement.addEventListener('mousedown', mouseDown);
}
.PopupLayered {
  background-color: rgba(40,40,40,0.7);
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  display:flex;
  justify-content:center;
  align-items:center
}

.PopupMainDiv {
  position: absolute;
  overflow: hidden;
  border: 2px solid #dddddd;
  border-radius: 5px;
  width: 400px;
  height: 200px;
  background-color: grey;
  color:white;
}

.PopupHeader {
  background-color: lightgray;
  color: #333333;
  font-weight: bold;
  position: relative;
  height: 25px;
  cursor: move;
  color: black;
}

/* Popup title span */
.PopupHeader span {
  width: 90%;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0.3em 0.3em;
}

/* Popup close button */
.PopupHeader button {
  color: white;
  background-color: #cc0000;
  border: none;
  border-radius: 2px;
  position: relative;
  float: right;
  white-space: nowrap;
  overflow: hidden;
  width: 20px;
  margin: 0.1em 0.2em;
  height: 20px;
}

  /* Popup close button hover */
.PopupHeader button:hover {
  background-color: red;
  cursor: pointer;
}

.Popup {
  position: absolute;
  background-color: gray;
  width:400px;
  height: 200px;
  text-align: center;
}
<div id="#PopupLayered" class="PopupLayered">
  <div id="#PopupMainDiv" class="PopupMainDiv">
    <div id="#PopupHeader" class="PopupHeader">
      <span>Click and drag the header!</span>
      <button type="button">x</button>
    </div>
    <div id="#Popup" class="Popup">
        <img src="http://www.alleycat.org/wp-content/uploads/2019/03/FELV-cat.jpg" width="450"/>
    </div>
  </div>
</div>
赞(0）分享  回复(0）举报  2023-03-01
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com