javascript - 在模态内部单击几次后，模态弹出窗口移动到左侧

问题描述

我在我的项目中制作了一个模式弹出窗口......它工作正常。但这里的问题是当我在弹出窗口内单击几次时，模式弹出窗口正在移动到左侧。

而且我没有找到确切的解决方案。在网上搜索了很多。但我没有得到解决方案。

这是我的模态代码：

.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();

如果我删除此行，则不会发生问题。

你们能帮我解决这个问题吗？过去几天一直在努力寻找解决方案。

提前致谢。

标签： javascriptjqueryhtmlcss

javascript - 在模态内部单击几次后，模态弹出窗口移动到左侧

问题描述

解决方案

推荐阅读