Модальний завантажувальний апарат з'являється під фоном

576

Я використовував код для свого модального прямо з прикладу Bootstrap і включав лише bootstrap.js (а не bootstrap-modal.js). Однак мій модальний екран з’являється під сірим відтінком (фоном) і не піддається редагуванню.

Ось як це виглядає:

модально ховаючись за фоном

Дивіться цю скрипку за один спосіб , щоб відтворити цю проблему. Основна структура цього коду така:

<body>
    <p>Lorem ipsum dolor sit amet.</p>    

    <div class="my-module">
        This container contains the modal code.
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>
</body>

body {
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
}

Будь-які ідеї, чому це чи що я можу зробити, щоб виправити це?

javascript  css  twitter-bootstrap  modal-dialog 
— натліни
джерело
У випадку, якщо хтось інший час шукає відкриті теги тощо, намагаючись з’ясувати, чому це відбувається, для мене саме розширення Feedly chrome зламало мої модалі. Вимкнення розширення повернуло поведінку до нормального.
— три вечір
У випадку може, проблема виявилася на iOS і викликана overflow-x: hiddenзастосуванням до контейнера модалу.
— idmean
1
Створено 3 приклади в трьох версіях. 3.3.1 працює добре, а інші - ні. Версія 3.3.1 jsfiddle Версія 3.3.5 jsfiddle Версія 3.3.6 jsfoddle
— Димитрій
1
Створений звіт про помилку разом із командою Bootstrap здається, що це насправді не помилка, навіть думка, що вона добре працює в 3.3.1. Детальніше про це ви можете прочитати за посиланням, яке я розмістив.
— Димитрій
Повідомлення в блозі, що стосується всіх, хто стикається з цим питанням weblog.west-wind.com/posts/2016/Sep/14/…

Відповіді:

629

Якщо модальний контейнер має фіксовану або відносну позицію або знаходиться в межах елемента з фіксованим або відносним положенням, така поведінка відбудеться.

Переконайтесь, що модальний контейнер та всі його батьківські елементи розміщені за замовчуванням, щоб вирішити проблему.

Ось кілька способів зробити це:

  1. Найпростіший спосіб - просто перемістити модальний поділ, щоб він знаходився поза будь-якими елементами зі спеціальним розташуванням. Добре місце може бути безпосередньо перед закриттям тега body </body>.
  2. Крім того, ви можете видалити position:властивості CSS з модалу та його предків, поки проблема не зникне. Це, однак, може змінити, як виглядає та функціонує сторінка.
— Мухд
джерело
24
Хороший улов. FYI, не просто "виправлена", позиція батьків "відносна" викликає і цю проблему
— Джан Нгуен
3
@Muhd, як ти переконаєшся, що всі його батьківські елементи розміщені за замовчуванням?
— індаго
4
Переважно скористайтеся першим варіантом: "просто перемістіть модальний діл, щоб він знаходився поза будь-якими елементами зі спеціальним розташуванням". Thx
— mpgn
9
Я не розумію цієї відповіді. У прикладах Bootstrap показаний модальний розділ з низкою класів по лінії "modal", "modal-fade" і т. Д. Всередині .modal він задає положення: фіксований, а всередині "modal-body" встановлює позицію: відносну. Отже, як переміщення модального контейнера буде щось змінювати, коли .modal встановлює положення: fix?
— Карлос
4
У мене ще є ця проблема. Я додаю його прямо раніше </body>і bodyне має жодного positionстилю. Будь-яка інша ідея?
— Туан Ань Тран
383

Проблема пов'язана з позиціонуванням батьківських контейнерів. Ви можете легко "перемістити" свій модуль з цих контейнерів, перш ніж показувати його. Ось як це зробити, якщо ви showвикористовували модальний модуль за допомогою js:

$('#myModal').appendTo("body").modal('show');

Або, якщо ви запускаєте модальний за допомогою кнопок, скиньте .modal('show');і просто зробіть:

$('#myModal').appendTo("body")

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

— Адам Олбрайт
джерело
12
Використовуйте цей загальний обробник подій, щоб змусити рішення @leandrotk працювати для всіх модалів, які ви можете мати на сторінці $('.modal-dialog').parent().on('show.bs.modal', function(e){ $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
— Патрік М.
2
@PatrickM. Дивовижний! що працювало як шарм над старим проектом, який я беру на себе, і вони мали модалі всюди!
— деніслексик
5
Це чудово працює, коли ви дійсно не можете виправити CSS-позиціонування. Дякую :)
— alexcasalboni
Чи є причина, чому я втрачаю все форматування CSS, коли це роблю? А просте виправлення? :-)
— Євген ван дер Мерве
1
З відповіді на ланцюжок просто змініть #myModal на .modal, щоб виглядати так: $ ('. Modal'). AppendTo ("body"). Це працюватиме з усіма модулями, оскільки вони мають модальний клас класу за замовчуванням.
— Ngatia Frankline
170

Я спробував усі варіанти, подані вище, але не змусив його працювати, використовуючи ці.

Що працювало: встановлення z-індексу .modal-backdrop до -1.

.modal-backdrop {
  z-index: -1;
}
— Ян ван дер Бург
джерело
10
Це спрацювало чудово і, безумовно, найпростіше рішення. Я використавz-index: 0;
— andrewcockerham
Також можна підтвердити, що працює лише ця опція! Дякую!
— Пором Краненбург
Дякую! Це помилка на BS3?
— mauriblint
1
Це не працює, якщо ви використовуєте тему, яка має багато різних z-індексів. Наприклад, установка фону для -1викличе його поява за інші елементами на сторінці , такі як панель. Але встановивши це, він 3зробив це вище всього, крім модального спливаючого вікна.
— Джастін Скілз
1
Це було найшвидшим методом після того, як вичерпали пропозиції у відповідях, оцінених вище. У моєму випадку, встановивши div з модально-діалоговим класом на z-індекс 1060, вискочив його перед накладкою. Якщо ви використовуєте navbar, ви хочете перемістити модал над накладкою, а не навпаки, інакше ваш navbar може спливати на верхній частині накладення ... хаос inses ...
— Майк Девенні
152

Також переконайтеся, що версія css і js BootStrap однакові. Різні версії також можуть робити модальні відображення під фоном:

Наприклад:

Погано:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

Добре:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
— Сид
джерело
Це було і для мене. Дякую!
— PedroTanaka
Просто була та сама проблема, та ж версія рішення стилів версій, здається, допомогла всім! Спасибі
— HGB
Дякую, це була моя точна проблема
— Малькор
Malcor жодних проблем, я витратив багато часу, поки я зрозумів цю помилку. Як ми бачимо, це було у 14 році, зараз - 16, помилка все ще існує. Насправді це не помилка, але автори завантажувачів повинні додати це у свою документацію чи щось таке.
— Sid
У цій же угоді ми перейшли до створення нашого SASS і повністю забули про сам js-файл .. Це має бути головною відповіддю. Оскільки наш модал завжди за замовчуванням включений безпосередньо перед тегом закриття тіла ...
— Angry 84
116

Я також стикався з цією проблемою, і жодне з рішень не працювало для мене, поки я не зрозумів, що насправді не потрібно фоном. Ви можете легко видалити фон за допомогою наступного коду.

<div class="modal fade" id="createModal" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create Project</h4>
            </div>
            <div class="modal-body">Not yet made</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Примітка : data-backdropатрибут потрібно встановити false( інші параметри : staticабо true).

— ПітерВК
джерело
2
На сьогодні найпростіше рішення і працює як шарм!
— learning_to_swim
Блискуче! Мені також потрібно було вимагати завантажувальний інструмент - не впевнений, чому всі інші мої функції Bootstrap працюють нормально, але мені потрібно вимагати модальної роботи.
— steve klein
Ідеально !!! боровся цілий день .. і ти врятував ще один день. Ще раз спасибі .. +1 та привіт
— Bhaskara
1
Уважно прочитавши всі рішення, я виявив, що це найрозумніший з сьогоднішньої версії bootstrap та jQuery. Дякую.
— Шифрування
3
Дякую! Це питання має понад 140 тис. Переглядів, і я не розумію, чому завантажувальна програма не може це виправити. ой добре, ура.
— Чад
58

Я змусив його працювати, надавши модальне вікно високе значення z-індексу ПІСЛЯ його відкриття. Наприклад:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
— Ендрю Дастер
джерело
Це працює (чоловік каже, що це так), чому ви голосуєте? Як я дивлюся, здається, що так і буде.
— Роліса
Так, може хто-небудь пояснить, чому це погана відповідь? Це просто такий вид хакі?
— brandones
6
Я не розумію прихильників. Так, це хакі, але інші рішення не спрацювали для мене, тому я подумав, що я б сприяв цьому людям, які не проти використовувати "хакі" рішення, щоб просто пробудити цю справу.
— Ендрю Дастер
Це було відповідним розумінням мого конкретного питання, що ставить модальний елемент на весь екран. +1
— Джек Стоун
3
Це погана відповідь, тому що це хакер і не робить жодних спроб цього вказувати. Інші відповіді говорять: "якщо нічого іншого не працює, ви могли б ...". Реальність полягає в тому, що модаль дуже широко використовується в Інтернеті і повинен працювати, якщо його реалізувати правильно. Хакі відповіді не допомагають людям розбиратись, як правильно робити справи.
— Лукос
35

Рішення, яке надає @Muhd - найкращий спосіб зробити це. Але якщо ви застрягли в ситуації, коли зміна структури сторінки не є можливим, скористайтеся цим фокусом:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

Примітка тут полягає в тому data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" , щоб видалити фон за замовчуванням і створити манекен, встановивши колір фону діалогового вікна з деякою альфа.

Оновлення 1: Як вказував @Gustyn, що натискання фону не закриває діалог, як очікувалося. Тож для досягнення цього вам потрібно додати трохи коду сценарію java. Ось кілька прикладів, як можна досягти цього. 

$('.modal').click(function(event){
    $(event.target).modal('hide');
});
— Кришненду
джерело
Це працює за винятком того, що натискання на фон не закриває діалог, як очікувалося.
— Густин
Кришненду u - мій герой. Я прийшов працювати з думкою і похмурістю на увазі. За 3 дні до моєї остаточної презентації перед цією проблемою раптом було найменше руйнування нервів. У мій друг заслуговує 100000 грошей, на жаль, можна дати лише один :) мати чудо-блаженний день.
— DotNetBeginner
Коли я це спробую, він не охоплює повний фон сторінки - лише елемент div, про який заявлено модаль.
— Буде Сем
Працювали чудово. Дякую!
— gfernandes
Працювали чудово. Дякую!
— Mayank Pandeyz
16

Але пізно на це, але ось загальне рішення -

    var checkeventcount = 1,prevTarget;
    $('.modal').on('show.bs.modal', function (e) {
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
        {  
          prevTarget = e.target;
          checkeventcount++;
          e.preventDefault();
          $(e.target).appendTo('body').modal('show');
        }
        else if(e.target==prevTarget && checkeventcount==2)
        {
          checkeventcount--;
        }
     });

Перейдіть за цим посиланням - Bootstrap 3 - модальний режим зникає під фоном при використанні фіксованої бічної панелі для отримання деталей.

— Рохан
джерело
Це було ідеальним рішенням для плагіна Wordpress, який я створював там, де не міг контролювати батьківські елементи на теми інших людей.
— Марк Руммель
Найкраще рішення поки що!
— digz6666
10

Інший спосіб підійти до цього - видалити z-індекс з .modal-backdropbootstrap.css. Це призведе до того, що фон буде на тому ж рівні, що і решта вашого тіла (він все ще в’яне), а ваш модаль буде зверху.

.modal-backdrop виглядає так

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}
— Самуель Бергерон
джерело
10

Просто додайте два рядки CSS:

.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}

.Modal-backdrop повинен мати значення 1050, щоб встановити його на панелі навігації.

— Вахіу Примаді
джерело
Приємно, але якщо контейнер модалів має position: fixedце, не вийде.
— CPHPython
10

Це охоплюватиме всі способи, не псуючи жодної анімації чи очікуваної поведінки. 

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});
— Cam Tullos
джерело
1
глобальне рішення. проте краще знайти проблему.
— Мілад Абуалі
Я не думаю, що це чудове рішення, як щодо сторінок з великою кількістю модалів? Могли заплутатися.
— Глен
Чи можете ви пояснити, як це стане безладно? Все, що він робить, - це переміщення модалі з того місця, де він зараз знаходиться в DOM, до кінця тегу body. Це не створює нічого, чого вже немає, просто переміщує його і автоматично надає йому верхній z-індекс.
— Cam Tullos
Найкраще рішення, я думаю. не потрібно редагувати жодний css та змінювати модальний вигляд
— Moslem7026
8

Я просто встановив:

#myModal {
    z-index: 1500;
}

і це працює ....

Для оригінального питання: 

.my-module {
    z-index: 1500;
}
— AmintaCode
джерело
Моєю проблемою був і z-індекс.
— Джеймс Локк
8

З цією проблемою часто можна зіткнутися при використанні таких елементів, як градієнти в CSS для таких речей, як фони або навіть заголовки акордеона.

На жаль, змінювати або переосмислювати ядро ​​Bootstrap CSS небажано і може призвести до небажаних побічних ефектів. Найменш настирливим підходом є додавання, data-backdrop="false"але ви можете помітити, що ефект зникання вже не працює так, як очікувалося.

Після останніх випусків Bootstrap, версія 3.3.5, здається, вирішує цю проблему без небажаних побічних ефектів.

Завантажте: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip

Обов’язково додайте CSS-файли та файли JavaScript з 3.3.5.

— Річард Налезинський
джерело
6

Привіт У мене був той самий випуск, то я розумію, що при використанні bootsrap 3.1 На відміну від старих версій bootsrap (2.3.2) структура HTML модальна була змінена!

ви повинні обернути ваше модальне тіло та колонтитул модальним діалогом та модальним вмістом 

<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>
— талісони
джерело
+1 переконайтеся, що ви використовуєте сумісні версії bootstrap.css і bootstrap.js, і чи ваша розмітка відповідає версії, яку ви використовуєте.
— srayner
Так, це був мій висновок, і я написав це тут, якби хтось мав це питання.
— талсибон
Ісусе Христе, ця відповідь похована глибоко. Той самий випадок і з Bootstrap 4.
— Ренделл
6

жодне із запропонованих вище рішень не працювало для мене, але ця методика вирішила проблему:

$('#myModal').on('shown.bs.modal', function() {
   //To relate the z-index make sure backdrop and modal are siblings
   $(this).before($('.modal-backdrop'));
   //Now set z-index of modal greater than backdrop
   $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
— Джавед Ікбал
джерело
Я вважаю за краще цей спосіб, оскільки втратив формати CSS за допомогою інших методів.
— Євген ван дер Мерве
6

У мене була ця проблема, і найпростіший спосіб її виправити - це додавання z-індексу, що перевищує 1040 на модально-діалоговому розділі:

<div class="modal-dialog" style="z-index: 1100;">

Я вважаю, що завантажувальний механізм створює подільний модальний фон, у якому в моєму випадку є z-індекс 1040, тож якщо ви поставите модальний діалог поверх цього, він більше не повинен сіріти.

— Кріс Розет
джерело
6

У мене легше і краще рішення ..

Це можна легко вирішити через деякі додаткові стилі CSS ..

  1. приховати клас .modal-backdrop(автоматично створений з Bootstrap.js)

    .modal-backdrop
{
display:none;
visibility:hidden; 
position:relative
}

  2. встановити фон .modalдля зображення на напівпрозорому чорному тлі.

    .modal
{
background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png")
// translucent image from google images 
z-index:1100; 
}

Це найкраще спрацює, якщо у вас є вимога, якій потрібен модал, щоб бути всередині елемента, а не поруч із </body>тегом.

— Дж. М. Трійник
джерело
Ти врятував мені день ... Це приємна альтернатива!
— notme
@xunga, не хвилюйся. будь ласка, поділіться цим рішенням з іншими людьми :)
— JM Tee
Ви можете переглянути зміни тут ... stackoverflow.com/posts/42887253/revisions
— notme
Дякую JM, ваше рішення було єдиним, хто працював на мене.
— Ахмед Дж
5

встановити z-індекс .modal на найвище значення

Наприклад, .sidebarwrapper має z-індекс 1100, тому встановіть z-індекс .modal на 1101

.modal {
    z-index: 1101;
}
— Могудум Каміль
джерело
5

У моєму випадку вирішіть це, додайте це до моєї таблиці стилів:

.modal-backdrop{
  z-index:0;
}
Розгорніть фрагмент

за допомогою налагоджувача Google, може вивчити елемент BACKDROP І змінити атрибути. Гугу везіння.

— Ckevyn Ovalle
джерело
3

у вашій навігації navbar-fixed-topпотрібно, z-index = 1041 а також якщо ви використовуєте bootstarp-combined.min.cssтакож зміни .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

— Мохсін
джерело
3

Ви також можете видалити z-індекс із .modal-backdrop. Отриманий css виглядав би так.

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }
— Метью Галєгос
джерело
3

Я видалив модальний фон.

.modal-backdrop {
    display:none;
}

Це не краще рішення, але працює для мене.

— Код коротко
джерело
3

що я знаходжу, це те, що:

у завантажувальній версії 3.3.0 це неправильно, але коли в завантажувальній версії 3.3.5 це правильно.let дивиться код. 3.3.0:

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .prependTo(this.$element)

3.3.5

  this.$backdrop = $(document.createElement('div'))
        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)
— ремешок
джерело
3

Додайте цю на свої сторінки. Це працює для мене.

<script type="text/javascript">
    $('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>
— Такеї
джерело
3

Це було виправлено, додавши стиль до тегу DIV нижче

style="background-color: rgba(0, 0, 0, 0.5);"

І додайте спеціальний css

.modal-backdrop {position: relative;}
— RaymondLe
джерело
3

Для мене найпростішим рішенням було покласти мій модал в обгортку з абсолютним положенням і z-індексом вище, ніж .modal-backdrop. Оскільки модальний фон (принаймні в моєму випадку) має z-індекс 1050:

.my-modal-wrapper {
  position: absolute;
  z-index: 1060;
}
<div class="my-modal-wrapper"></div>
Розгорніть фрагмент

— sivi911
джерело
z-індекс працював на мене. Дуже дякую.
— Асиф Ікбал
2

У моєму випадку у мене була обгортка з наступним:

.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}

Вилучив лише z-індекс: 1 і поняття не має, чому виправив проблему. також, безумовно, зняття відносної позиції, але мені це було потрібно.

— hsobhy
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.