<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
		<title>拖拽移动位置，拖动大小</title>
		<link href="drag.css" rel="stylesheet" type="text/css" />
        <style>
        
        /* 遮罩层 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        /* 弹窗 */
        .modal-content {
            position: fixed;
            top: 15%;
            left: 50%;
            margin-left: -25%;
            width: 45%;
            height: 70%;
            min-width: 31.125rem;
            min-height: 18.625rem;
            border-radius: .125rem;
            background-color: white;
            z-index: 2;
        }

        .modal-body {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .mb_revise {
            padding: .625rem 0 0 1.5625rem;
        }

        .mb_revise>p {
            padding-left: .25rem;
            margin-top: .125rem;
            font-family: 'FangSong', Times, serif;
            font-size: 15px;
            border-left: solid .125rem royalblue;
        }
        
        /*修改框*/
        .xiugai {
            height: 2em;
            width: 14.375rem;
            margin-top: .625rem;
        }

        /* 确定和取消 */
        .determine,
        .cancen {
            position: absolute;
            width: 3.625rem;
            height: 2.1875rem;
            color: #fff;
            border: 0;
            outline: none;
            box-shadow: 0 .125rem .125rem rgb(107, 96, 96);
            cursor: pointer;
        }

        .determine {
            right: 6.5rem;
            bottom: .725rem;
            background-color: rgba(9, 139, 245, 0.788);
        }

        .cancen {
            right: 2rem;
            bottom: .725rem;
            background-color: rgba(212, 37, 37, 0.788);
        }

        .determine:hover,
        .cancen:hover {
            color: #fff;
            box-shadow: 0 .134rem .1275rem rgb(58, 57, 57);
        }

        .determine:active,
        .cancen:active {
            box-shadow: 0 .134rem .1275rem rgba(230, 227, 227, .758);
        }

        
        </style>
        
	</head>
	<body>
		<a id="js_show">打开弹窗</a>
 <!-- 弹窗 -->
    <div class="modal">
        <div class="modal-content">
            <div class="modal-body">
                <div class="mb_revise">
                    <p>请输入您要修改的内容...</p>
                    <input type="text" class="xiugai">
                </div>
                <button class="determine">确定</button><button class="cancen">取消</button>
            </div>
        </div>
    </div>

	</body>
</html>
<script>
        // 打开弹窗
        var a = document.getElementById("js_show");
        a.onclick = function(){
	        var modal = document.querySelector(".modal");
            modal.style.display = "block";
        }
        // 点击取消 关闭弹窗
        var cancen = document.querySelector(".cancen");
        cancen.onclick = function(){
	        var modal = document.querySelector(".modal");
            modal.style.display = "none";
        }



</script>