JQuery UI Диалог всегда появляется в верхнем левом углу

jquery jquery-ui

629 просмотра

2 ответа

16 Репутация автора

Этот вопрос задавался на этом форуме несколько раз, и я попробовал все предложения, но пока ничего не работает.

В приложении MVC у меня есть диалоговое окно jquery ui, которое должно появиться рядом со ссылкой, по которой пользователь нажимает. Итак, у меня есть следующий вид:

div class="row">
    <div class="col-md-4">
        <h2>Link for popup</h2>
        <p>
            @Ajax.ActionLink("Update Status", "UpdateStatus", "Home",
                        new AjaxOptions
                            {
                                HttpMethod = "GET",
                                UpdateTargetId = "rolesPopUp",
                                InsertionMode = InsertionMode.Replace,
                                OnSuccess = "openSuccess"
                            })
        </p>
    </div>
    <div class="col-md-4">
        <h2>See this being updated</h2>
        <p id="rolesPopUp">Col 2</p>        
    </div>
    <div class="col-md-4 popupBase">
        <h2>Web Hosting</h2>
        <p id="successUpdate">Col 3</p>
    </div>
</div>

Это было создано с единственной целью тестирования диалога. В основном я создал приложение MVC в Visual Studio 2013, обновил до последней версии jquery и установил пользовательский интерфейс jquery. Я поставил DatePicker, чтобы увидеть, работает ли он. У меня есть следующие скрипты внизу страницы:

 <script src="/Scripts/jquery-3.0.0.js"></script>
 <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
 <script src="/Scripts/jquery-ui-1.11.4.js"></script>
 <script src="/Scripts/bootstrap.js"></script>
 <script src="/Scripts/respond.js"></script>



 <script type="text/javascript">
    $.ajaxSetup({ cache: false });

    $(function () {
        // Activate datepicker ui. It is not shown in the view file to keep the code short.
        $(".myDatePicker").datepicker();    
        $("#successUpdate").text("Waiting!"); 
        $("#rolesPopUp").dialog({
            autoOpen: false,
            position: { my: "center", at: "center", of: ".popupBase", collision: "none" }
        });
    });

    // openPopup function
    function openSuccess() {
        $("#successUpdate").text("Success!");
        $("#rolesPopUp").dialog("open");            
    }

 </script>

Независимо от того, что я делаю, диалог всегда появляется в левом верхнем углу экрана. Я перепробовал много разных позиций (по центру экрана / окна / элемента, справа, слева и т. Д.), Прочитал несколько статей по этой проблеме, добавил и удалил столкновение, попытался отладить код с помощью firebug, чтобы увидеть, где меняется позиция, но так как мои знания jquery довольно ограничены, я не мог понять, где позиция перезаписывается. На самом деле я не вижу в коде ничего, что указывало бы на изменение позиции в коде. Я потратил 5 дней на это, я не могу найти пути решения. Мне нужна помощь, пожалуйста.

Автор: Toni78 Источник Размещён: 18.07.2016 12:07

Ответы (2)


0 плюса

16 Репутация автора

Это было очень просто. Я использовал JQuery 3.1.0. Понижение до jquery 1.10.2 сработало. Я не пробовал никаких других версий jquery. Я использовал jquery 1.10.2, потому что это то, что используется на официальном сайте диалога jquery ui http://api.jqueryui.com/dialog/ .

Автор: Toni78 Размещён: 19.07.2016 02:34

0 плюса

144 Репутация автора

Я использовал jQuery UI 1.8.7, который имеет стили ниже для диалога:

.css({ top: 0, left: 0 })

Я обновил его с:

.css({ top: 0, left: 0 })
.position($.extend({of: window }, position));

чтобы:

//.css({ top: '170px', left: '650px' })
.position($.extend({ my: "center", at: "center", of: window }, position));
Автор: Manoj Shekhawat Размещён: 16.01.2018 09:02
Вопросы из категории :
32x32