Модальний режим завантаження: фон перемикається вгору на тумблер

111

У мене проблема, з модальним. У мене на сторінці є кнопка, яка перемикає модаль. Коли модальний показ відображається, сторінка переходить наверх.

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

Редагувати:

Я також спробував: $('#myModal').modal('show');але це точно такий же ефект.

javascript  jquery  css  twitter-bootstrap  twitter-bootstrap-3 
— FooBar
джерело
Привіт Бенні. Так, я викликаю заперечення. Я також спробував з: $ ('# myModal'). Modal ('показати'); але це має точно такий же ефект.
— FooBar
1
чи може вам це допомогти, те саме питання: stackoverflow.com/questions/12894570/…
— Марк
@ Марк. Дивіться мою відповідь нижче ...
— Ravimallya
Я помітив, що якщо я натискаю де-небудь у тому, windowщо модальні пожежі. Це здається дивним несподіваним. Я видалив buttonчерез devtools, і натиснувши будь-яку сторінку сторінки, все ще відкрилося модальне вікно. Це була бажана поведінка? Цікаво, чи немає у вас правильного селектора для події модального клацання.
— двор

Відповіді:

174

Коли модальний режим відкривається, modal-openклас встановлюється на <body>тег. Цей клас підходить overflow: hidden;до тіла. Додайте це правило до таблиці стилів, щоб змінити стиль bootstrap.css:

body.modal-open {
    overflow: visible;
}

Тепер сувій повинен залишатися на місці.

— pstenstrm
джерело
@pstenstrm, я маю сумніви. ви сказали перезаписати css для .modal-open класу. Але що робити, якщо є додаткові закриваючі діви, і у своїй відповіді я не перекрив жодних класів у своїй резолюції? Він прекрасно працює після видалення 2 зайвих дівок. bs модальний додаючи .modal-backdrop div, який заплутається там, де його потрібно було закрити через зайві теги закриття.
— Равімалія
4
Не працює для мене, у мене є модаль всередині iframe, і він прокручується вгору ... будь-які ідеї?
— Cabuxa.Mapache
5
Це зафіксувало це для мене. Просто додати корінь моєї проблеми було «тіло {зріст: 100%}».
— PeteG
23
Не працює для мене. У мене є ванільний модал, який я відкриваю, .modal('show')і він все ще прокручується вгорі сторінки. Bootstrap v3.2.0
— MandM
6
Мені довелося додати position: inheritдо цього класу, але працював як шарм після цього.
— adrian3martin
28

Якщо ви телефонуєте модально з тегом. Спробуйте видалити "#" з атрибута href. І виклик модальних даних з атрибутами даних.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
— Гохан
джерело
Я відкриваю це саме так, як ви розмістили там. Перевірте посилання
— FooBar
5
якщо ви не використовуєте кнопку "<кнопка>", але <a>, як у моєму випадку, ви втрачаєте значок "кнопка пальця" при переміщенні курсору миші на об'єкт. Щоб подолати це, я зробив це так: ... href = "# mai_modal_id" data-toggle = "modal" ... і я не використовував цільові дані
— pagurix
3
@pagurix - Ваш коментар найкраще підійшов для мого сценарію.
— AlfredBr
Я думаю, @pagurix повинен написати свій коментар як окрему відповідь. Єдине, що допомогло. Пальці вгору!
— Вібхор Дубе
14

якщо ви використовуєте тег прив’язки як <a href"#" ..> ... </a>і href="#"створює проблему, видаліть його. Більше ви можете прочитати тут

— Німеш Джайн
джерело
12 
$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

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

— Георгій Мірчев
джерело
5

Можливо, робота з модалями, які вкладені десь у коді:

body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}

Для мене це було поєднанням положення, висоти та переповнення.

— Денніс Хайден
джерело
4

Я не бачу конкретної помилки, але я б радив вам перевірити свій html-синтаксис .

Крихітний тест з вашим джерелом дає мені подібні помилки

Рядок 127, стовпець 34: незакритий елемент, розділ.

              <div class="inner onlySides">

Це може бути проблемою.

— billyJoe
джерело
Дякую - я буду розбиратися в цьому, - хоча мені важко повірити, що це може викликати проблему, яку я відчуваю. Схоже, ви використовуєте плагін для відстеження цього - якщо так; котрий?
— FooBar
я не використовую плагін, крім firebug. Завжди добре перевірити дійсність сторінки на validator.w3.org . Це було б проблемою, тому що якщо у вас є незакритий div, у вас буде дивна поведінка :)
— billyJoe
4

Найпростіший спосіб вирішити стрибаючий фон - це визначити два параметри:

body.modal-open {
  overflow: visible;
  padding-right: 0 !important;
}
— Нільс
джерело
3

Я спробував повторити цю проблему на своєму localhost, і як би дивно це не здалося, існує конфлікт із файлом Bootstrap JS, який ви використовуєте.

Спробуйте прокоментувати свій код:

<script src="/min/?f=bootstrap.min.js,modernizr.js,bootstrap-datetimepicker.js,nprogress.js,feedback.js,select2.min.js,jquery.unveil.js,equalheights.jquery.js,hogan-v2.0.0.min.edu-custom.js,jquery.visible.min.js,handlebars-v1.2.0.js,typeahead.bundle.min.js,jquery.gridster.js,cookie.jquery.js,jquery.autosize.min.js,application.js&ver=1392814384"></script>

І замість цього використовуйте Bootstrap 2.3.2:

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

Це змусило мене працювати.

Я спробував це з Bootstrap версії 3, але це не вийшло. Я досі не в змозі точно визначити проблему, але десь уздовж Firebug видав мені e.preventDefault() is not a functionпомилку - я здогадуюсь, що це має бути першопричиною, але я поки що не повинен порівнювати її з іншими файлами JS.

— АйБ
джерело
3

Я намагався встановити .modal top у центрі екрана. 

.modal {
    position: absolute;
    top: 50%;
}

Просто мої 2 центи думок.

— Хольгер Тібош
джерело
Достатньо близько. Я не підкажу, тому що моя проблема може бути деінде, але це спричинило затемнення нижньої половини екрана, але модал був розташований у напрямку до центру.
— крафтер
3

У завантажувальній версії 3.1.1 я вирішив це рішення:

body.modal-open {
    position: absolute !important;
}
— Філо
джерело
2
Ти врятував мій день @Filo Дякую тобі
— vinothini
2

у вас є 2 додаткові divтеги, що закриваються, безпосередньо перед ділом <div id="footer">або після нього <div id="mainFrame" class="group">. Я використовую візуальну студію 2012 Express для перевірки цього.

Видаліть ці 2 додаткових диви та дайте нам знати, як це працює. Я видалив зайві діви та видалив усі власні сценарії. зберігається лише ядро ​​jquery та завантажувальний апарат у нижньому колонтитулі. ось короткий огляд кінцевого результату. ось для вас майданчик jsbin, який прекрасно працює.

Я пропоную вам використовувати headjs для завантаження всіх скриптів та файлів css. також не дуже добре завантажувати будь-які сценарії двічі.

введіть тут опис зображення

— Равімалія
джерело
4
Схильні відповіді потребують належних коментарів із причинами.
— Равімалія
2

Спробуйте скористатися цим способом, щоб відкрити модальний режим і побачити, що відбувається:

<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
  Launch demo modal 
</a>
— скутер
джерело
2 
body.modal-open {
overflow: visible !important;
}

Мені потрібен був важливий атрибут для його виправлення

— Запаморочення
джерело
Це працювало на мене, і у мене було питання @ MandM (у коментарях) з відповіді pstenstrm: "Не працює для мене. У мене є ванільний модал, який я відкриваю з .modal (" шоу "), і він все ще прокручується вгору сторінки. Bootstrap v3.2.0 ". Єдиний дивний ефект, який він має, це те, що зараз фон буде прокручуватися, якщо ви продовжуєте прокручувати модаль, який вище за вікно, але це для мене незначна проблема. Дякую.
— дгіг
1

У мене був той самий випадок, використовуючи Bootstrap 2.3.2

Це було проблемою для натискання на посилання:

Хитрість була: повернути помилкове;

<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;">
     <i class="icon-map-marker"></i>
</a>

і js:

function openModal() {
    $('#myModal').modal('show');
}
— mpccolorado
джерело
1

Я витрачав години на це, пробуючи все тут і в інших місцях. Для використання angularjs-матеріалів виявилося, що мені довелося вимкнути анімацію на об’єкті аргументу uibModal.open.

Наприклад:

  $uibModal.open(
    {
      animation: false,
      component: 'myDialogComponent',
      size: 'lg',
      resolve: {
        details: function() {
          return detailsCollection;
        }
      }
    }
  );

Сподіваюся, що це допомагає комусь іншому.

— Пляж Натан
джерело
1

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

::ng-deep {   
     body.modal-open {
          overflow: visible !important;
          position: absolute !important;   
     } 
}
— панда сибашанкар
джерело
0

У мене була така ж проблема, і я думаю, що це я вирішую. Вам просто потрібно розмістити модальний HTML як безпосередній дочірній тег body ! Ви можете розмістити HTML-код для кнопки, що запускає модал, де вам потрібно. Я вважаю, що це дозволяє уникнути спадкування CSS та проблем з позицією, які викликають цю проблему.

Приклад:

<body>
    <!-- All your other HTML code -->
    <div>
        <!-- Button trigger modal -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</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>
    </div>
</body>
— нуноарруда
джерело
0

Нарешті з’ясував це. НЕ загортайте кнопку, орієнтовану на модал, у тег прив’язки.

Поганий

<a href"#">
    <button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>
</a>

Добре

<button type="button" class="btn"
    data-toggle="modal" data-target="#myModal">See Detail</button>
— ALFmachine
джерело
0

Цей зробив це для мене

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}
— warkitty
джерело
У мене виникли подібні проблеми із стрибками в навибарі та контейнері, коли модал був відкритий. Це те, що я шукав.
— Awhitey98
Рада, що це допомогло!
— warkitty
0

Прочитавши десятки відповідей протягом декількох годин, я скопіював оригінальний код з файлу завантажувального файлу знову і налагоджував крок за кроком, щоб побачити, що спричинило те, що я завжди стрибаю на вершину. Тому що фактична остання версія Bootstrap 3 відображає модальний режим у тому місці, де ти зараз є. Я дізнався, що -webkit-transform: translate3d(0,0,0);і height: 100%в моєму тесті css body викликав таку поведінку. Можливо, це допомагає комусь.

— AlexioVay
джерело
0

Для мене працює, коли я змінив версію з 3.1.1 на 3.3.7

Якщо вам не потрібно використовувати версію 3.3.1, спробуйте замінити.

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
— Пьот
джерело
0

Я спробував усі вищеперелічені приклади - це єдине, що працювало для мене:

.modal-open {

            padding-right: 0 !important;

        }

Видалення накладки з правого боку моделі - запобігає стрибку.

— Stnfordly
джерело
0

висота: 100% - це вирішити проблему, але ви повинні додати правильний "div"

— Анар Алі
джерело
0

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

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

var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();
— Борзіло Андрій
джерело
0

Я стикався з тим же питанням. Проблемою було те, що я додав .modal-open клас до html та body елементів. Просто додайте цей клас до корпусу і все працює так, як очікувалося.

— загальний666
джерело
-1

Спробуйте це прекрасно працює

/* fix body.modal-open overflow:hidden */
body.modal-open {
    height: auto;
}
— мінімум
джерело
-3

Якщо відповідь pstenstrm для вас не працює, спробуйте поєднати її з цією кнопкою заміни HTML:

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>

Це має тримати кнопку на екрані.

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