JQuery UI 1.10: дыялог і опцыі ZIndex

Я павінен зрабіць дыялог з'яўляцца, калі малюнак OnClick. Праблема заключаецца ў тым, што ў мяне ёсць некаторыя сапраўды вялікі Z-індэкс там (500, напрыклад) і дыялогавае акно карыстацкага інтэрфейсу на задняй часткі, што элементы.

Вось старонка, вам неабходна ўвайсці ў сістэму, карыстальнік: «raducup» і перадаць: "1". Іншая праблема заключаецца ў тым, што, калі я націскаю зачыніць АНТ дыялогавае акно, аб'ект desapears.

Гэта функцыя, якую я называю, калі малюнак націсніце:

function openItem(obiect){
    $( obiect ).css('zIndex',9999);
    $( obiect ).dialog({
        dialogClass: "no-close",
        modal: true,
        draggable: true,
        overlay: "background-color: red; opacity: 0.5",
        buttons: [
            {
                text: "OK",
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ]
    });
    reparaZindex();
}
41
Проста дадайце Z-індэкс: 9999 у form.It працаваў для мяне.
дададзена аўтар Harsha Venkatram, крыніца
Проста дадайце Z-індэкс: 9999 у form.It працаваў для мяне.
дададзена аўтар Harsha Venkatram, крыніца
Вы можаце ўсталяваць ZIndex опцыю: '1000' у дыялогавым вызначэння і выдалення $ (obiect) .css ( 'ZIndex', 9999); ?
дададзена аўтар Irvin Dominin, крыніца
Вы можаце ўсталяваць ZIndex опцыю: '1000' у дыялогавым вызначэння і выдалення $ (obiect) .css ( 'ZIndex', 9999); ?
дададзена аўтар Irvin Dominin, крыніца
Вы можаце ўсталяваць ZIndex опцыю: '1000' у дыялогавым вызначэння і выдалення $ (obiect) .css ( 'ZIndex', 9999); ?
дададзена аўтар Irvin Dominin, крыніца
Не працуе, гэта было першае, што я зрабіў ...
дададзена аўтар raducup, крыніца
Не працуе, гэта было першае, што я зрабіў ...
дададзена аўтар raducup, крыніца
Не працуе, гэта было першае, што я зрабіў ...
дададзена аўтар raducup, крыніца

17 адказы

Вы не кажаце, але вы карыстаецеся jQuery UI 1.10.

У jQuery UI 1.10 ZIndex опцыя выдаляецца:

<�Р> Выдалены параметр ZIndex      <�Р> Аналагічна опцыі стэка, опцыя ZIndex непатрэбна з   належны ажыццяўленне штабелирования. Г-індэкс вызначаецца ў CSS і   штабелирования цяпер знаходзіцца пад кантролем, забяспечваючы мэтанакіраваны дыялог з'яўляецца апошнім   элемент «штабелирование» у яго бацькі. </р>

вы павінны выкарыстоўваць чысты CSS, каб усталяваць дыялог «на вяршыні»:

.ui-dialog { z-index: 1000 !important ;}

Вам патрэбен ключ важнае перавызначыць стыль па змаўчанні элемента !; гэта ўплывае на ўсе дыялогі, калі вам трэба ўсталяваць яго толькі для дыялогавага выкарыстання dialogClass <�код /> варыянт і стыль яго.

Калі вам трэба мадальны дыялог налады мадальны: праўдзівы <�код /> варыянт прагляду дакументы :

<�Р> Калі ўсталявана значэнне праўдзіва, то дыялог будзе мець мадальнай паводзіны; іншыя пункты   старонка будзе заблакаваная, гэта значыць, не можа быць ўзаемадзейнічала з. мадальны   Дыялогі стварыць накладанне ніжэй дыялогу, але вышэй іншай старонкі   элементы. </р>

Вам трэба ўсталяваць мадальнасці накладку з больш высокім Z-індэксам для гэтага выкарыстоўваць:

.ui-front { z-index: 1000 !important; }

для гэтага элемента таксама.

96
дададзена
<�Код> .ui-дыялог павінен быць .ui авансавыя + 1 , не працуе для мяне інакш. Так .ui авансавыя {г-індэкс 1000 важна; } .Ui-дыялог {г-індэкс: 1001 важна; }
дададзена аўтар Hirnhamster, крыніца
+1 - я зачапілася за змяненнем да сп-індэкса ў jQuery UI 1.10 таксама
дададзена аўтар Alnitak, крыніца
Стыль .ui фронт таксама як .ui фронт {г-індэкс 1000 важны; }, Так як накладанне выкарыстоўваць Z-індэкс 100 па змаўчанні
дададзена аўтар Irvin Dominin, крыніца
Для мадальных дыялогаў, я знайшоў загад быць важнымі. Змесціце .ui-фронт над .ui-дыялогу. Калі вы не дыялог выкарыстоўвае .ui фронту Z-індэкс і заканчваецца за накладкай.
дададзена аўтар Ben Gripka, крыніца
У jQuery UI v1.9.2, замест ўстаноўкі Z-індэкс .ui фронту , вы павінны ўсталяваць Z-індэкс .ui-віджэт накладзенай . Акрамя таго, як адзначае @Hirnhamster, покрыўка павінна быць на Z-індэкс менш фішкі, ці яшчэ оверлэй будзе перакрываць фактычны дыялог, а таксама.
дададзена аўтар Scott, крыніца
Тэхнічна, опцыя ZIndex не рэкамендуецца, але адразу выдаленыя. См bugs.jqueryui.com/ticket/8729 .
дададзена аўтар Matthew Clark, крыніца
Я выкарыстоўваць мадальны: праўдзівыя, але мадальных толькі для элементаў з ZIndex 0, калі ён мае zindx 500 мадальны варыянт не працуе
дададзена аўтар raducup, крыніца

Вы можаце паспрабаваць jQuery дыялогавага метад:

$( ".selector" ).dialog( "moveToTop" );

reference: http://api.jqueryui.com/dialog/#method-moveToTop

8
дададзена
Адзінае меркаванне, што працаваў для мяне! Дзякуй! 11
дададзена аўтар Dan Rayson, крыніца
Гэта! Гэта было менавіта тое, што мне трэба для кіравання некалькіх складзеных дыялогамі. У мяне ёсць мыш апрацоўшчыкаў ў маіх дыялогах, якія звязваюцца адзін з адным. Гэта робіць яго проста «успомніць» і існуючы дыялог і перанесьці яго на фронт без валтузні з Z-індэксамі. Выдатна!
дададзена аўтар Todd Hammer, крыніца

Вы можаце паспрабаваць jQuery дыялогавага метад:

$( ".selector" ).dialog( "moveToTop" );

reference: http://api.jqueryui.com/dialog/#method-moveToTop

8
дададзена
Адзінае меркаванне, што працаваў для мяне! Дзякуй! 11
дададзена аўтар Dan Rayson, крыніца
Гэта! Гэта было менавіта тое, што мне трэба для кіравання некалькіх складзеных дыялогамі. У мяне ёсць мыш апрацоўшчыкаў ў маіх дыялогах, якія звязваюцца адзін з адным. Гэта робіць яго проста «успомніць» і існуючы дыялог і перанесьці яго на фронт без валтузні з Z-індэксамі. Выдатна!
дададзена аўтар Todd Hammer, крыніца

Дадайце ў вашым CSS:

 .ui-dialog { z-index: 1000 !important ;}
7
дададзена
Акрамя таго, я думаю, вы павінны прыняць адказ!
дададзена аўтар Rajiv007, крыніца
ваш кантэнт з дапамогай Z-індэкс: 501 ... так што вы павінны выкарыстоўваць больш.
дададзена аўтар Rajiv007, крыніца
мадальны: ісціна ўжо ўстаноўлена вамі!
дададзена аўтар Rajiv007, крыніца
Вы ўпэўненыя, што ... я праверыў старонку і яна працавала для мяне. На жаль, калі не вырашыць вашу праблему. Можа быць, вы можаце дадаць! Важна.
дададзена аўтар Rajiv007, крыніца
Не працуе ...
дададзена аўтар raducup, крыніца
Дзякуй! Цяпер ён працуе мадальны рэч ..
дададзена аўтар raducup, крыніца
Зараз ён працуе з! Важны, але некаторыя элементы ўсё яшчэ ў стане выбраць (патрэбен мадальны інтэрфэйс)
дададзена аўтар raducup, крыніца

Дадайце ў вашым CSS:

 .ui-dialog { z-index: 1000 !important ;}
7
дададзена
Вы ўпэўненыя, што ... я праверыў старонку і яна працавала для мяне. На жаль, калі не вырашыць вашу праблему. Можа быць, вы можаце дадаць! Важна.
дададзена аўтар Rajiv007, крыніца
Акрамя таго, я думаю, вы павінны прыняць адказ!
дададзена аўтар Rajiv007, крыніца
ваш кантэнт з дапамогай Z-індэкс: 501 ... так што вы павінны выкарыстоўваць больш.
дададзена аўтар Rajiv007, крыніца
мадальны: ісціна ўжо ўстаноўлена вамі!
дададзена аўтар Rajiv007, крыніца
Не працуе ...
дададзена аўтар raducup, крыніца
Дзякуй! Цяпер ён працуе мадальны рэч ..
дададзена аўтар raducup, крыніца
Зараз ён працуе з! Важны, але некаторыя элементы ўсё яшчэ ў стане выбраць (патрэбен мадальны інтэрфэйс)
дададзена аўтар raducup, крыніца

Дадайце ў вашым CSS:

 .ui-dialog { z-index: 1000 !important ;}
7
дададзена
Вы ўпэўненыя, што ... я праверыў старонку і яна працавала для мяне. На жаль, калі не вырашыць вашу праблему. Можа быць, вы можаце дадаць! Важна.
дададзена аўтар Rajiv007, крыніца
Акрамя таго, я думаю, вы павінны прыняць адказ!
дададзена аўтар Rajiv007, крыніца
ваш кантэнт з дапамогай Z-індэкс: 501 ... так што вы павінны выкарыстоўваць больш.
дададзена аўтар Rajiv007, крыніца
мадальны: ісціна ўжо ўстаноўлена вамі!
дададзена аўтар Rajiv007, крыніца
Не працуе ...
дададзена аўтар raducup, крыніца
Дзякуй! Цяпер ён працуе мадальны рэч ..
дададзена аўтар raducup, крыніца
Зараз ён працуе з! Важны, але некаторыя элементы ўсё яшчэ ў стане выбраць (патрэбен мадальны інтэрфэйс)
дададзена аўтар raducup, крыніца

Ёсць некалькі прапаноў тут, але, наколькі я магу бачыць, хлопцы jQuery UI парушылі кантроль дыялогу ў цяперашні час.

Я кажу гэта таму, што я ўключаю дыялог на маёй старонцы, і яго напаўпразрыстым і мадальны гашэнне DIV знаходзіцца ззаду некаторых іншых элементаў. Гэтага не можа быць!

У рэшце рэшт, на аснове некаторых іншых пасад я распрацаваў гэта глабальнае рашэнне, як пашырэнне дыялогу фішкі. Гэта працуе для мяне, але я не ўпэўнены, што ён будзе рабіць, калі я адкрыў дыялог унутры дыялогу.

У асноўным гэта выглядае для ZIndex ўсяго астатняга на старонцы і перамяшчае .ui-віджэт-накладку быць адзін вышэй, а сам дыялог быў адзін вышэй.

$.widget("ui.dialog", $.ui.dialog,
{
    open: function ()
    {
        var $dialog = $(this.element[0]);

        var maxZ = 0;
        $('*').each(function ()
        {
            var thisZ = $(this).css('zIndex');
            thisZ = (thisZ === 'auto' ? (Number(maxZ) + 1) : thisZ);
            if (thisZ > maxZ) maxZ = thisZ;
        });

        $(".ui-widget-overlay").css("zIndex", (maxZ + 1));
        $dialog.parent().css("zIndex", (maxZ + 2));

        return this._super();
    }
});

Thanks to the following, as this is where I got the info from of how to do this: https://stackoverflow.com/a/20942857

http://learn.jquery.com/jquery-ui/widget -factory/пашырэнне-фішкі/

1
дададзена

Ёсць некалькі прапаноў тут, але, наколькі я магу бачыць, хлопцы jQuery UI парушылі кантроль дыялогу ў цяперашні час.

Я кажу гэта таму, што я ўключаю дыялог на маёй старонцы, і яго напаўпразрыстым і мадальны гашэнне DIV знаходзіцца ззаду некаторых іншых элементаў. Гэтага не можа быць!

У рэшце рэшт, на аснове некаторых іншых пасад я распрацаваў гэта глабальнае рашэнне, як пашырэнне дыялогу фішкі. Гэта працуе для мяне, але я не ўпэўнены, што ён будзе рабіць, калі я адкрыў дыялог унутры дыялогу.

У асноўным гэта выглядае для ZIndex ўсяго астатняга на старонцы і перамяшчае .ui-віджэт-накладку быць адзін вышэй, а сам дыялог быў адзін вышэй.

$.widget("ui.dialog", $.ui.dialog,
{
    open: function ()
    {
        var $dialog = $(this.element[0]);

        var maxZ = 0;
        $('*').each(function ()
        {
            var thisZ = $(this).css('zIndex');
            thisZ = (thisZ === 'auto' ? (Number(maxZ) + 1) : thisZ);
            if (thisZ > maxZ) maxZ = thisZ;
        });

        $(".ui-widget-overlay").css("zIndex", (maxZ + 1));
        $dialog.parent().css("zIndex", (maxZ + 2));

        return this._super();
    }
});

Thanks to the following, as this is where I got the info from of how to do this: https://stackoverflow.com/a/20942857

http://learn.jquery.com/jquery-ui/widget -factory/пашырэнне-фішкі/

1
дададзена

Дадаць ZIndex ўласцівасць дыялогавага аб'екта:

$(elm).dialog(
 zIndex: 10000
);
1
дададзена

Дадаць ZIndex ўласцівасць дыялогавага аб'екта:

$(elm).dialog(
 zIndex: 10000
);
1
дададзена

Дадайце гэта перад выклікам дыялогу

$( obiect ).css('zIndex',9999);

І выдаліць

 zIndex: 700,

з дыялогу

0
дададзена
Вы можаце выкарыстоўваць шкура() функцыя для гэтага Чытаць api.jquery.com/hide</а>
дададзена аўтар Rohan Kumar, крыніца
Я выкарыстоўваю шоў пасля таго, як функцыю, але яна па-ранейшаму атрымлівае нябачнай ...
дададзена аўтар raducup, крыніца
Не працуе, я абнавіў код, але па-ранейшаму не працуе, праверце код ўверх.
дададзена аўтар raducup, крыніца
Ok, дзякуй, цяпер, як зрабіць аб'ект не desapir пасля я націскаю зачыніць (элемент малюнка)
дададзена аўтар raducup, крыніца

Дадайце гэта перад выклікам дыялогу

$( obiect ).css('zIndex',9999);

І выдаліць

 zIndex: 700,

з дыялогу

0
дададзена
Вы можаце выкарыстоўваць шкура() функцыя для гэтага Чытаць api.jquery.com/hide</а>
дададзена аўтар Rohan Kumar, крыніца
Я выкарыстоўваю шоў пасля таго, як функцыю, але яна па-ранейшаму атрымлівае нябачнай ...
дададзена аўтар raducup, крыніца
Не працуе, я абнавіў код, але па-ранейшаму не працуе, праверце код ўверх.
дададзена аўтар raducup, крыніца
Ok, дзякуй, цяпер, як зрабіць аб'ект не desapir пасля я націскаю зачыніць (элемент малюнка)
дададзена аўтар raducup, крыніца

Для бутэрброда з маім элементам паміж мадальным экранам і дыялогам, мне трэба, каб падняць свой элемент вышэй мадальнага экрана, а затым падніміце дыялог вышэй майго элемента.

Я меў невялікі поспех, выканаўшы наступныя дзеянні пасля стварэння дыялогу на элемент $ DLG .

$dlg.closest('.ui-dialog').css('zIndex',adjustment);

Паколькі кожны дыялог мае розны пачатковы Z-індэкс (яны паступова становяцца больш) я зрабіць настройка радок са значэннем павышаючага, як гэта:

const adjustment = "+=99";

Аднак, jQuery проста трымае павялічваючы ZIndex значэнне на мадальнай экране, так у другім дыялогу, сэндвіч больш не працаваў. Я адмовіўся ад UI-дыялогу «мадальнага», зрабіў гэта "хлусьня", а проста стварыў сваю ўласную мадальнасць. Ён пераймае jQueryUI дакладна. Вось яна:

CoverAll = {};
CoverAll.modalDiv = null;

CoverAll.modalCloak = function(zIndex) {
  var div = CoverAll.modalDiv;
  if(!CoverAll.modalDiv) {
    div = CoverAll.modalDiv = document.createElement('div');
    div.style.background = '#aaaaaa';
    div.style.opacity    = '0.3';
    div.style.position   = 'fixed';
    div.style.top        = '0';
    div.style.left       = '0';
    div.style.width      = '100%';
    div.style.height     = '100%';
  }
  if(!div.parentElement) {
    document.body.appendChild(div);
  }
  if(zIndex == null)
    zIndex = 100;
  div.style.zIndex  = zIndex;
  return div;
}

CoverAll.modalUncloak = function() {
  var div = CoverAll.modalDiv;
  if(div && div.parentElement) {
    document.body.removeChild(div);
  }
  return div;
}
0
дададзена

Для бутэрброда з маім элементам паміж мадальным экранам і дыялогам, мне трэба, каб падняць свой элемент вышэй мадальнага экрана, а затым падніміце дыялог вышэй майго элемента.

Я меў невялікі поспех, выканаўшы наступныя дзеянні пасля стварэння дыялогу на элемент $ DLG .

$dlg.closest('.ui-dialog').css('zIndex',adjustment);

Паколькі кожны дыялог мае розны пачатковы Z-індэкс (яны паступова становяцца больш) я зрабіць настройка радок са значэннем павышаючага, як гэта:

const adjustment = "+=99";

Аднак, jQuery проста трымае павялічваючы ZIndex значэнне на мадальнай экране, так у другім дыялогу, сэндвіч больш не працаваў. Я адмовіўся ад UI-дыялогу «мадальнага», зрабіў гэта "хлусьня", а проста стварыў сваю ўласную мадальнасць. Ён пераймае jQueryUI дакладна. Вось яна:

CoverAll = {};
CoverAll.modalDiv = null;

CoverAll.modalCloak = function(zIndex) {
  var div = CoverAll.modalDiv;
  if(!CoverAll.modalDiv) {
    div = CoverAll.modalDiv = document.createElement('div');
    div.style.background = '#aaaaaa';
    div.style.opacity    = '0.3';
    div.style.position   = 'fixed';
    div.style.top        = '0';
    div.style.left       = '0';
    div.style.width      = '100%';
    div.style.height     = '100%';
  }
  if(!div.parentElement) {
    document.body.appendChild(div);
  }
  if(zIndex == null)
    zIndex = 100;
  div.style.zIndex  = zIndex;
  return div;
}

CoverAll.modalUncloak = function() {
  var div = CoverAll.modalDiv;
  if(div && div.parentElement) {
    document.body.removeChild(div);
  }
  return div;
}
0
дададзена

Для бутэрброда з маім элементам паміж мадальным экранам і дыялогам, мне трэба, каб падняць свой элемент вышэй мадальнага экрана, а затым падніміце дыялог вышэй майго элемента.

Я меў невялікі поспех, выканаўшы наступныя дзеянні пасля стварэння дыялогу на элемент $ DLG .

$dlg.closest('.ui-dialog').css('zIndex',adjustment);

Паколькі кожны дыялог мае розны пачатковы Z-індэкс (яны паступова становяцца больш) я зрабіць настройка радок са значэннем павышаючага, як гэта:

const adjustment = "+=99";

Аднак, jQuery проста трымае павялічваючы ZIndex значэнне на мадальнай экране, так у другім дыялогу, сэндвіч больш не працаваў. Я адмовіўся ад UI-дыялогу «мадальнага», зрабіў гэта "хлусьня", а проста стварыў сваю ўласную мадальнасць. Ён пераймае jQueryUI дакладна. Вось яна:

CoverAll = {};
CoverAll.modalDiv = null;

CoverAll.modalCloak = function(zIndex) {
  var div = CoverAll.modalDiv;
  if(!CoverAll.modalDiv) {
    div = CoverAll.modalDiv = document.createElement('div');
    div.style.background = '#aaaaaa';
    div.style.opacity    = '0.3';
    div.style.position   = 'fixed';
    div.style.top        = '0';
    div.style.left       = '0';
    div.style.width      = '100%';
    div.style.height     = '100%';
  }
  if(!div.parentElement) {
    document.body.appendChild(div);
  }
  if(zIndex == null)
    zIndex = 100;
  div.style.zIndex  = zIndex;
  return div;
}

CoverAll.modalUncloak = function() {
  var div = CoverAll.modalDiv;
  if(div && div.parentElement) {
    document.body.removeChild(div);
  }
  return div;
}
0
дададзена

moveToTop is the proper way.

Z-індэкс не з'яўляецца правільным. Ён працуе на пачатковым этапе, але некалькі дыялогавых вокнаў будуць працягваць плаваць пад адным вы змененым з Z-індэксам. Нічога добрага.

0
дададзена

moveToTop is the proper way.

Z-індэкс не з'яўляецца правільным. Ён працуе на пачатковым этапе, але некалькі дыялогавых вокнаў будуць працягваць плаваць пад адным вы змененым з Z-індэксам. Нічога добрага.

0
дададзена