JQuery диалог и пользовательский контроль - PullRequest
1 голос
/ 23 апреля 2011

Как сделать, чтобы диалог jquery охватывал только пользовательский элемент управления, а не всю страницу ... какие-либо идеи?

Представьте, что у меня есть этот сценарий в пользовательском элементе управления (.ascx)

<script type="text/javascript">
    $(document).ready(function () {
        $("#popup").dialog({ closeOnEscape: false, draggable: false, modal: true, 
                                resizable: false, closeText: 'hide' });

    $.ajax({
            type: "POST",
            dataType: "xml",
            contentType: "application/json; charset=utf-8",
            url: "Service2.svc/DoWork",
            data: "{}",
            processdata: true, //True or False
            success: function (response, textStatus, jqXHR) {
                $("#popup").dialog('close');

            },
            error: function () {
                $("#popup").dialog('close');
                alert("error");
            }
        });
});

</script>

<div id="popup" style="display:none">
Loading contents... 
</div>

Теперь проблема в том, что когда пользовательский элемент управления загружен, модал (оверлей) покрывает всю страницу.Я хочу, чтобы он охватывал только пользовательский элемент управления, чтобы пользователь по-прежнему мог взаимодействовать с другими элементами управления на странице.

Ответы [ 2 ]

3 голосов
/ 23 апреля 2011

Если вы хотите заблокировать только определенную часть страницы, не используйте модальные, сделайте это вручную. Оберните часть страницы, которую вы хотите отключить, в div, и добавьте / удалите наложение в событиях открытия и закрытия диалога.

$("#popup").dialog({
    closeOnEscape: false,
    draggable: false,
    modal: false,
    resizable: false,
    closeText: 'hide',
    open: function(){
        $('.coverme').append('<div class="ui-widget-overlay"></div>');
    },
    close: function(){
        $('.coverme').find('.ui-widget-overlay').remove();
    }        
});

В приведенном выше коде '.coverme' - это селектор, который выбирает части страницы, которые вы хотите затемнить и заблокировать. Убедитесь, что вы установили свойство position css для контейнеров на относительное или абсолютное (что угодно, кроме статического), иначе наложение заполнит всю страницу.

Посмотрите на http://jsfiddle.net/DBd36/

0 голосов
/ 23 апреля 2011

Пользовательский интерфейс jQuery dialog позволяет указывать позицию , поэтому вы можете расположить ее где угодно, в том числе «на пользовательском элементе управления»:

$( ".selector" ).dialog({ position: [10, 200], height: 300, width: 300 });
...