Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Windows 10</title>
- <style>body {overflow: hidden;user-select: none;-webkit-user-select: none;-ie-user-select: none;}</style>
- <link type="text/css" rel="stylesheet" href="file:///C:/Users/AkarinPC/Documents/HTML/Windows10/css/windowStyle.css"><!-- External / my local css style -->
- <style>
- .window {
- position: absolute;
- top: 0px;
- left: 0px;
- background: #7A7574;
- border: 1px solid #84807F;
- display: inline-block;
- }
- .content {
- position: relative;
- margin: 0px 0px -4px 0px;
- height: 480px;
- width: 800px;
- min-height: 100px;
- min-width: 160px;
- background: white;
- -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
- box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
- border: none;
- outline: none;
- resize: both;
- }
- button[type=close] {
- float: right;
- width: 45px;
- height: 28px;
- background: #e8112300;
- color: white;
- font-size: 20px;
- font-weight: 100;
- border: none;
- outline: none;
- z-index: 2;
- }
- button[type=close]:hover {
- background: #e81123;
- }
- button[type=close]:active {
- background: #bc3942;
- }
- button[type=help] {
- float: right;
- width: 45px;
- height: 28px;
- background: #e8112300;
- color: white;
- font-size: 15px;
- font-weight: 100;
- border: none;
- outline: none;
- z-index: 2;
- }
- button[type=help]:hover {
- background: #888382;
- }
- button[type=help]:active {
- background: #95918f;
- }
- div .header {
- position: absolute;
- top: 0px;
- left: 7px;
- height: 30px;
- width: 89%;
- color: white;
- font-family: 'Arial';
- font-size: 11px;
- }
- </style>
- </head>
- <body>
- <div class="window" id="window">
- <div class="header" id="windowheader"><span style="position: relative;top: 7px;">WinCopy Platform</span></div>
- <div>
- <button type="close">тип</button>
- <button type="help">?</button>
- </div>
- <!-- Here you can edit the source -->
- <iframe class="content" src="file:///C:/Users/AkarinPC/Documents/HTML/TextArea.html"></iframe>
- </div>
- <script>
- dragElement(document.getElementById("window"));
- 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;
- }
- }
- </script>
- </body>
- </html>
Add Comment
Please, Sign In to add comment