我在项目中制作了一个模式弹出窗口。但是这里的问题是，当我多次在弹出式窗口中单击时，模式弹出式窗口正向左侧移动。
我没有找到确切的解决方案。在网络上搜索了很多内容。但是我没有解决办法。
这是我的模式代码：
.followup-modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 380px;
background-color: #f7f7f7;
}
.followup-modal .modal-header {
background-color: #1c3f94;
border-radius: 5px 5px 0 0;
text-align: center;
color: #fff;
}
.followup-modal .modal-title {
color: #fff;
padding: 8px 5px;
font-size: 12px;
}
.followup-modal .modal-content {
border: 1px solid #ccc;
border-top: none;
border-radius: 5px 5px 0 0;
}
.followup-modal .modal-body {
padding: 15px;
}
.followup-modal .modal-body #reminderdate {
border: 1px solid #ccc;
padding: 2px;
}
.followup-modal .modal-body #reminderText {
width: 294px !important;
margin-left: 20px;
border: 1px solid #ccc;
padding: 4px;
}
.followup-modal .modal-body #reminderclosereason {
width: 90%;
margin-left: 6px;
padding: 3px;
border: 1px solid #ccc;
}
.followup-modal .modal-footer {
text-align: center;
padding-bottom: 10px;
}
.followup-modal .modal-footer .defaultbutton {
padding: 2px 10px;
}
.popup-dragable {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
z-index: 99999;
left: 0;
z-index: 99999 !important;
}
#reminder.popup-layout {
left: 0;
}
#reminder.popup-layout .modal-body {
height: 80px;
}
#reminder.popup-layout .followup-modal .modal-footer {
height: 32px;
}
.reminder {
margin-top: -1px;
vertical-align: middle;
} <div class="popup-dragable hideElement" style="display: block;">
<div id="reminderPopup"><div id="reminder" class="popup-layout">
<form id="reminderForm" method="post">
<div class="modal followup-modal ui-draggable" id="reminderPopupdrag" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">select_followup</h5>
</div>
<div class="modal-body">
<div id="errorInPopup" class="error displayInlineBlock"></div>
<table class="width100percent">
<tbody><tr>
<td>
<label><input type="radio" name="reminder" id="reminder-1" value="1" class="element full-width verticalAlignMiddle reminder">close_with_reminder</label> </td>
<td class="textAlignRight">
<input type="text" id="reminderdate" name="reminderdate" class="marginRight5 displayNone">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="reminderText" id="reminderText" value="" class="element displayNone width-full marginTop5" placeholder="add_remark_here"> </td>
</tr>
<tr>
<td colspan="2">
<label><input type="radio" name="reminder" id="reminder-2" value="2" class="element full-width verticalAlignMiddle reminder">close_without_reminder</label> </td>
</tr>
<tr>
<td colspan="2">
<select name="reminderclosereason" id="reminderclosereason" class="element displayNone width100percent">
<option value="">Select value</option>
<option value="6">Advertisements</option>
<option value="4">Another reason:</option>
<option value="17">Checking financial terms and conditions</option>
<option value="16">Company not leasable</option>
<option value="18">Future potential clients </option>
<option value="20">Offer is of vehicle type in which we do not do business</option>
<option value="12">Open application</option>
<option value="13">Order</option>
<option value="10">Other ticket already in progress</option>
<option value="11">Out of office reply </option>
<option value="50">Portal, ad removed, payment, offer withdrawn</option>
<option value="7">SPAM</option>
<option value="9">Unsubscribe MFO Mailing</option>
<option value="2">Vehicle/part is sold (indicate order number!)</option>
<option value="8">Vehicle/part not on stock (is looking for something else)</option>
<option value="1">Vehicles too expensive</option>
</select> </td>
</tr>
</tbody></table>
</div>
<div class="modal-footer">
<input type="submit" name="send" id="sendPreview" value="Save" class="defaultbutton displayNone"> </div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
当它向左移动时，它会像下面这样更改此行
<div class="modal followup-modal ui-draggable" id="reminderPopupdrag" tabindex="-1" role="dialog" style="left: 572.5px; top: 141.2px;">
我发现问题是由于这一行而发生的
$('#reminderPopupdrag').draggable();
如果我删除此行，则不会出现问题。
你们能帮我解决这个问题吗？..过去几天努力寻找解决方法。
谢谢。
答案 0 :(得分：0)
解决方法是将draggable（）应用于modal-dialog类：
代替此行$('#reminderPopupdrag').draggable();
我用过$(".modal-dialog").draggable();
现在问题解决了。