预览效果
javascript
<div class='tishiMask'>
<div class="tishiEm">
<div id="coor"></div>
<div class="topNew ismove">
<span class="ismove">提示</span>
<p onclick="closeTishi()">×</p>
</div>
<div class="bottomNew">
<p>提示文字软件</p>
<div class="newDesignBtn">
<input type="button" value="确定" class="btnLeft" onclick="closeTishi()" >
<input type="button" value="取消" onclick="closeTishi(this)" class="btnRight">
</div>
</div>
</div>
</div>
javascript
.tishiMask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .18);
display: block;
z-index: 99999;
}
.tishiEm {
z-index: 99999;
/* display: none; */
/* -webkit-transition: -webkit-box-shadow .2s; */
/* transition: box-shadow .2s; */
position: fixed;
height: 220px;
width: 300px;
top: 38%;
/* margin-top: -100px; */
left: 43%;
/* margin-left: -150px; */
background: #fff;
border-radius: 5px 5px 0px 0px;
-webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.4);
/* -webkit-transition: -webkit-box-shadow .2s; */
/* transition: box-shadow .2s; */
/* transition: all .4s; */
/* -webkit-transition: all .4s; */
/* -moz-transition: all .4s; */
}
.tishiEm .topNew {
overflow: hidden;
background-image: linear-gradient(183deg, #3d95ea 0%, #70b0e6 100%);
border-radius: 5px 5px 0px 0px;
}
.tishiEm .topNew span {
color: #fff;
font-size: 12px;
height: 34px;
line-height: 34px;
display: block;
float: left;
margin-left: 10px;
}
.tishiEm .topNew p {
float: right;
color: #fff;
font-size: 20px;
height: 34px;
line-height: 34px;
display: block;
margin-right: 10px;
cursor: pointer;
}
.tishiEm .bottomNew {
margin: 0px 0px;
}
.tishiEm .bottomNew {
text-align: center;
}
.tishiEm .bottomNew p {
font-size: 12px;
height: 20px;
line-height: 20px;
}
.tishiEm .bottomNew .newDesignBtn {
overflow: hidden;
width: 100%;
height: auto;
display: flex;
justify-content: flex-end;
align-items: center;
position: absolute;
bottom: 10px;
left: 0;
}
.tishiEm .bottomNew .newDesignBtn .btnLeft {
display: block;
float: left;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.22);
background: #5da2e5;
color: #fff;
font-size: 12px;
width: auto;
text-align: center;
height: 24px;
line-height: 24px;
border-radius: 4px;
border: none;
cursor: pointer;
padding: 0px 14px;
border: 1px solid #5da2e5;
}
.tishiEm .bottomNew .newDesignBtn .btnLeft:hover {
background: #1a78d9;
border: 1px solid #0069b8;
color: #fff;
}
.tishiEm .bottomNew .newDesignBtn .btnRight {
display: block;
float: left;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.22);
background: #dcdcdc;
color: #383838;
font-size: 12px;
width: auto;
text-align: center;
height: 24px;
line-height: 24px;
border-radius: 4px;
margin-right: 28px;
margin-left: 10px;
border: none;
cursor: pointer;
padding: 0px 14px;
border: 1px solid #dcdcdc;
}
.tishiEm .bottomNew .newDesignBtn .btnRight:hover {
background: #c4c4c4;
color: #383838;
border: 1px solid #aaa;
}
#coor, #coor_set, #coor_syt {
width: 20px;
height: 20px;
overflow: hidden;
cursor: se-resize;
position: absolute;
right: 0;
bottom: 0;
/* background-color: #09c; */
background: url(./../images/scale.png);
background-size: 100% 100%;
transform: rotate(270deg);
z-index: 999;
}
类名tishiEm设置宽高为缩小最小宽高。
注意下方js注释
javascript
$(function () {
$(document).mousemove(function (e) {
if (!!this.move_gy) {
var posix_gy = !document.move_target_gy ? { 'x': 0, 'y': 0 } : document.move_target_gy.posix_gy,
callback_gy = document.call_down_gy || function () {
let viewWidth = $(document).width();
let maxLeft = viewWidth - $(".tishiEm").width(); // 左侧最大移动量
let viewHeight = $(document).height();
let maxHeight = viewHeight - $(".tishiEm").height(); // 底部最大移动量
let currentTop = e.pageY - posix_gy.y;
let currentLeft = e.pageX - posix_gy.x;
if (currentTop <= 0 || currentLeft <= 0 || currentLeft >= maxLeft || currentTop >= maxHeight) {
return
} else {
$(this.move_target_gy).offset({
'top': currentTop,
'left': currentLeft
});
}
};
callback_gy.call(this, e, posix_gy);
}
}).mouseup(function (e) {
if (!!this.move_gy) {
var callback_gy = document.call_up_gy || function () {
};
callback_gy.call(this, e);
$.extend(this, {
'move_gy': false,
'move_target_gy': null,
'call_down_gy': false,
'call_up_gy': false
});
}
});
var $box = $('.tishiEm').mousedown(function (e) {
let offset = $(this).offset();
this.posix_gy = { 'x': e.pageX - offset.left, 'y': e.pageY - offset.top };
if (!$(e.target).hasClass('ismove')) { // 只允许蓝色区域可拖动
return;
} else {
$.extend(document, { 'move_gy': true, 'move_target_gy': this });
}
}).on('mousedown', '#coor', function (e) {
var posix_gy = {
'w': $box.width(),
'h': $box.height(),
'x': e.pageX,
'y': e.pageY
};
$.extend(document, {
'move_gy': true, 'call_down_gy': function (e) {
//下方为最小宽高 同步上方css
$box.css({
'width': Math.max(300, e.pageX - posix_gy.x + posix_gy.w),
'height': Math.max(220, e.pageY - posix_gy.y + posix_gy.h)
});
}
});
return false;
});
});