我的 javascript 框上需要一个关闭按钮

金纳兹

所以我正在创建一个应用程序,该应用程序将记录来自咖啡馆的客户交易,我正在处理我当前的订单页面,它们上会有一些框来显示这些订单。我在 javascript 方面非常不称职,所以我不知道当这个人完成订单后如何在我的框中添加一个关闭按钮。有人可以帮我解决这个问题。谢谢你。这是我的代码

#mydiv {
    position: absolute;
    z-index: 9;
    background-color: #f1f1f1;
    text-align: center;
    border: 1px solid #d3d3d3;
}

<div id="mydiv">
  <div id="mydivheader">Order Num#</div>
  <p>Order Items</p>
  <span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>
</div>

<div id="mydiv2">
  <div id="mydivheader">Order Num#</div>
  <p>Order Items</p>
</div>

<div id="mydiv3">
  <div id="mydivheader">Order Num#</div>
  <p>Order Items</p>
</div>

<script>
//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));

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;

  }
哈迪克·马萨拉瓦拉

我在下面添加了我的代码,希望它能满足您的要求

//START UPDATED CODE

//END UPDATED CODE

//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));
//START UPDATED CODE
function removeElement(DivId) {
     document.getElementById(DivId).remove();
}
//END UPDATED CODE


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

//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv2"));

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

//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv3"));

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;
  }
}
#mydiv {
    position: absolute;
    z-index: 9;
    background-color: #f1f1f1;
    text-align: center;
    border: 1px solid #d3d3d3;
}

#mydiv2 {
    position: absolute;
    z-index: 9;
    background-color: #f1f1f1;
    text-align: center;
    border: 1px solid #d3d3d3;
}

#mydiv3 {
    position: absolute;
    z-index: 9;
    background-color: #f1f1f1;
    text-align: center;
    border: 1px solid #d3d3d3;
}
#mydivheader {
    padding: 10px;
    cursor: move;
    z-index: 10;
    background-color: #2196F3;
    color: #fff;
}
<html>
  <head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <!-- START UPDATED CODE -->
  <script  src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="  crossorigin="anonymous"></script>
  <!-- END UPDATED CODE -->
  <link rel="stylesheet" type="text/css" href="css_stylesheet.css">
  </head>
  <body>
<div id="tabs" ul class="nav nav-pills">
      <li><a data-toggle="pill" href="#current_orders">Current Orders</a></li>
      <li><a data-toggle="pill" href="#new_order">New Order</a></li>
      <li><a data-toggle="pill" href="#past_orders">Past Orders</a></li>
</div>
<div id="mydiv" class="orderBox">
  <div id="mydivheader">Order Num#</div>
  <p>Order Items</p>
  <!-- START UPDATED CODE -->
  <span id='close' onclick="removeElement('mydiv')"  style="cursor: pointer;" >x</span>
  <!-- END UPDATED CODE -->
</div>

<div id="mydiv2"  class="orderBox" style="top: 25px; left: 169px;">
  <div id="mydivheader">Order Num#</div>
  <p>Order Items</p>
  <!-- START UPDATED CODE -->
  <span id='close' onclick="removeElement('mydiv2')"  style="cursor: pointer;">x</span>
  <!-- END UPDATED CODE -->
</div>

<div id="mydiv3"  class="orderBox" style="top: 23px; left: 378px;">
  <div id="mydivheader">Order Num#</div>
  <p>Order Items</p>
  <!-- START UPDATED CODE -->
  <span id='close' onclick="removeElement('mydiv3')"  style="cursor: pointer;" >x</span>
  <!-- END UPDATED CODE -->
</div>
</body>
</html>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

我需要同时打开两个网页并关闭上一个标签的JavaScript?

我需要知道一个 javascript 代码

我正在努力在 javascript 中创建一个按钮

我需要一个确认按钮

我可以使用Javascript动态创建一个按钮,然后根据需要将其删除吗?

我需要使用 HTML、CSS 和 Javascript 制作一个按钮,以便在单击按钮时将字体颜色从红色更改为红色

我有一个数组,我需要使用 javascript 更改数组格式

我需要在 Javascript 中做两个循环,一个 do/while 和一个 For

我可以使用JavaScript或CSS关闭上一个div吗?

使用一个按钮打开和关闭图片(JavaScript)

javascript 数学函数:现在它形成一个圆,我需要做一个半圆

当用javascript悬停另一个元素时,我需要在表格中显示一个元素

JavaScript:我需要一个连续的循环,不会杀死浏览器或阻止页面

Django:javascript需要调用一个python脚本,我把它放在什么位置?

我需要检查一个JavaScript数组,看看是否有重复的值。

我需要一个用javascript编写的无角度的strongloop示例

我需要在 classList 模板字符串 javascript 中增加一个数字

我想要一个按钮来触发使用 jquery/JavaScript 的链接

我试图在javascript中做一个简单的按钮,做两件事

我想添加一个按钮onclick函数,在javascript中添加几个toasts

我们可以在一个复选框上触发两个事件吗?单击一个来自 javascript,另一个来自代码隐藏

创建一个需要Javascript函数输入的按钮

好的,我有一个任务,我需要做这样的事情:obj.function()。function()。function()JavaScript

我创建了一个关闭/打开按钮,但是第一次使用它时,您需要单击两次

使一个javascript切换按钮关闭另一个

我想在单击带有 html /css / javascript 的特定按钮(帮助按钮)时显示一个 div

我在tkinker中有一个“顶层”按钮,我想关闭窗口,然后执行功能

我需要创建一个按钮,单击该按钮会自动填充表单的注释部分

提交按钮在表格数据下呈现。我只需要一个提交按钮