Режим завантаження відразу зникає

Я працюю на веб-сайті за допомогою bootstrap.

В основному, я хотів використати модал на домашній сторінці, викликаний кнопкою в підрозділі героїв.

Код кнопки:

<button type="button" 
    class="btn btn-warning btn-large" 
    data-toggle="modal"
    data-target="#myModal">Open Modal</button>

Модальний код:

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">In Costruzione</h3>
  </div>
  <div class="modal-body">
    <p>Test Modal: Bootstrap</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
    <button class="btn btn-warning">Salva</button>
  </div>
</div>

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

Буду вдячний за будь-яку допомогу.

Крім того, як змінити колір випадаючого трикутника (вгору, без наведення курсора)? Я працюю на веб-сайті, заснованому на помаранчевому та коричневому, і ця синя річ справді дратує.

Ймовірна причина

Це типова поведінка, коли JavaScript для плагіна Modal завантажується двічі. Перевірте, чи плагін не завантажується подвійно. Залежно від платформи, яку ви використовуєте, модальний код може бути завантажений з ряду джерел. Деякі з поширених:

• bootstrap.js (повний набір BootStrap JS)
• bootstrap.min.js (те саме, що вище, тільки що мінімізоване)
• bootstrap-modal.js (окремий плагін)
• завантажувач залежностей, наприклад, require('bootstrap')

Поради щодо налагодження

Гарне місце для початку - перевірити зареєстрованих clickслухачів подій за допомогою інструментів розробника у вашому браузері. Наприклад, Chrome перелічить вихідний файл JS, де можна знайти код для реєстрації слухача. Інший варіант полягає в спробі пошуку джерел на сторінці для фрази , знайденої в коді модальної, наприклад, var Modal.

На жаль, вони не завжди знайдуть речі у всіх випадках. Огляд мережевих запитів може бути трохи надійнішим, коли ви дасте зображення всього завантаженого на сторінці.

Демонстрація (зламана)

Ось демонстрація того, що відбувається, коли ви завантажуєте і bootstrap.js, і bootstrap-modal.js (лише для підтвердження свого досвіду):

Плункер

Якщо ви прокрутите донизу джерела на цій сторінці, ви можете видалити або прокоментувати <script>рядок bootstrap-modal.js, а потім перевірити, що тепер модал буде функціонувати так, як очікувалося.

У мене була така ж проблема, але вона мала іншу причину. Я стежив за документацією і створив кнопку так:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

Коли я натиснув його, виявилося, що нічого не станеться. Однак кнопка знаходилася в тій частині, <form>яка тимчасово лише отримувала ту саму сторінку.

Я виправив це, додавши type="button"елемент кнопки, щоб він не надсилав форму при натисканні на неї.

Для мене те, що працювало, було зняти

data-toggle="modal"

з кнопки. Самою кнопкою може бути будь-який елемент - посилання, div, кнопка тощо.

Деякий корисний відповідь на це питання я деякий час шукав дублюючу посилання на завантажувальну програму в додатку mvc.

Нарешті знайшов його - він був включений до іншої бібліотеки, яку я використовував, тому зовсім не було очевидно! ( datatables.net).

Якщо у вас все-таки виникає ця проблема, знайдіть інші бібліотеки, які можуть включати завантажувальну програму для вас. ( datatables.netдозволяє вказати завантаження з завантажувальним пристроєм або без нього - інші роблять те ж саме).

Тож я зняв bootstrap.min.jsзі свого bundle.configі все добре працював.

Той самий симптом у контексті програми Rails з Bootstrap, наданої bootstrap-sassсамоцвітом, і відповідь @ merv поставила мене на правильний шлях.

Мій application.jsфайл мав таке:

//= require bootstrap
//= require bootstrap-sprockets

Виправлення полягало в тому, щоб видалити один з двох рядків. Дійсно, readme дорогоцінного каміння попереджає про цю помилку. Моє ліжко.

Мій код якось включав bootstrap.min.js двічі. Я видалив одну з них і зараз все працює нормально.

e.preventDefault(); з jquery ui

Для мене ця проблема виникла, коли метод клацання замінив кнопку jquery ui, викликаючи перезавантаження сторінки при натисканні за замовчуванням.

Проблема також може виникнути, якщо за допомогою jquery двічі приєднати слухача подій. Ви можете встановити без прив'язки:

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal('toggle')
            })

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

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal()
                $("#fixerrormodal").modal('toggle')
            })

Див. Приклад: http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

Я зіткнувся з тим же симптомом, який показав @gpasse у своєму прикладі. Тут був мій код ...

<form...>
  <!-- various inputs with form submit --->

  <!-- button opens modal to show dynamic info -->
  <button id="myButton" class="btn btn-primary">Show Modal</button>
</form>

<div id="myModal" class="modal fade" ...>
</div>

<script>
  $( '#myButton' ).click( function() {
    $( '#myModal' ).modal();
  )};
</script>

Як запропонував @Bhargav, мою проблему було пов’язано з кнопкою, що намагалася надіслати форму та перезавантажити сторінку. Я змінив кнопку на <a>посилання так:

<a href="#" id="myButton" class="btn btn-primary">Show Modal</a>

... і це вирішило проблему.

ПРИМІТКА. У мене ще недостатньо репутації, щоб просто додати коментар або оновити, і я відчув, що можу додати трохи пояснень.

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

    <input  type='submit' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

до

    <input  type='button' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

І це вирішило питання зникнення.

У моєму випадку я мав лише один файл bootstrap.js, jquery.js, але все-таки отримував такий тип помилок, і мій код кнопки був приблизно таким:

<script type="text/javascript">
$(document).ready(function(){
   $("#bttn_<?php echo $rnt['id'];?>").click(function(){
      $("#myModal_<?php echo $rnt['id'];?>").modal('show');
   });
});
</script>

Я просто додав e.preventDefault (); до нього і це працювало як шарм.

Отже, мій новий код був як нижче:

<script type="text/javascript">
$(document).ready(function(){
  e.preventDefault();
  $("#bttn_<?php echo $rnt['id'];?>").click(function(){
     $("#myModal_<?php echo $rnt['id'];?>").modal('show');
  });
});
</script>

Я сьогодні натрапив на це питання, і це трапилося лише в Chrome. Що змусило мене зрозуміти, що це може бути проблемою візуалізації. Переміщення конкретного модалу до власного шару візуалізації вирішило його.

#myModal {
  -webkit-transform: translate3d(0, 0, 0);
}

У моєму випадку натискання на кнопку викликає (не бажане) перезавантаження сторінки.

Ось моє виправлення:

<button class="btn btn-success" onclick="javascript: return false;" 
data-target="#modalID" data-toggle="modal">deaktivieren</button>

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

Я назвав модальний в JavaScript за допомогою

 $('#ModalId').modal('show');

Перед помилкою я використовую цю кнопку

<a href="" onclick="return Edit();" class="btn btn-primary">Edit</a>

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

Потім я редагую цей код кнопки так

 <a href="#" onclick="return Edit();" class="btn btn-primary">Edit</a>

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

подивіться, чи це вам допоможе.

Ще одна причина / рішення! У мене був JS-код:

$("#show_survey").click(function() {
  $("#survey_modal").modal("show")
})

Але мій HTML-код уже писався так:

<a class="small-text link" data-target="#survey_modal" data-toggle="modal" href="#" id="show_survey">Take a quick 7 question survey!</a>

Отже, це ще одна перестановка того, як дублювання вводило код і змушувало модал відкриватися та закриватися. У моєму випадку data-targetі data-toggleв html, згідно з документами Bootstrap, вже запускають модаль працювати. Отже, код JS є надлишковим, і коли він видалений, він працює.

У мене була така ж проблема, працюючи над проектом з asp.NET. Я за допомогою bootstrap 3.1.0 вирішив її пониження до Bootstrap 2.3.2.

У мене теж виникло питання, якщо кнопка знаходиться в a тег, тоді модаль з’являється один раз і зникає досить швидко, виймаючи кнопку з форми, зафіксовану isue. Дякую, що я опинився в цій темі! +1 для всіх.

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

<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a> 

Змініть кнопку на прив’язний тег, вона повинна працювати, проблема виникає через її тип типу, оскільки вона намагається подати, щоб модаль зникає негайно. А також видаліть приховування від модального приховування зникне, дайте <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> сподівання, що це буде працювати для вас.

У моєму випадку я включив CDN в голову application.html.erb, а також встановив дорогоцінний камінь 'jquery-rails', який, напевно, завдяки документації та публікаціям вище, є зайвим.

Я просто прокоментував CDN (внизу) від голови application.html.erb, і модал належним чином залишається відкритим.

<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->

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

Код нижче відображає модальний режим, який негайно втрачається:

<a href="" onclick="do_some_stuff()">Hey</a>

Я в кінцевому підсумку додав "#" до href, щоб посилання нікуди не переходило, і це вирішило мою проблему.

<a href="#" onclick="do_some_stuff()">Hey</a>

Ви спробували видалити

data-dismiss="modal"

Я знаю, що це давнє, але ось ще одну річ, яку потрібно перевірити - переконайтеся, що у вас є лише один атрибут data-target =. Я дублював це, і результат був відповідний цій темі.

Я додав bootstrapу свій проект через bower, потім імпортував bootstrap.min.jsфайл і після нього modal.js. (Кнопка, що відкриває модаль, знаходиться всередині форми). Я просто видаляю імпорт для, modal.jsі він працює для мене.

у випадку, якщо хтось використовує завантажувальний код codeigniter 3 з даними даних.

нижче моє виправлення в config / ci_boostrap.php

//'assets/dist/frontend/lib.min.js',
//lib.min.js has conflict with datatables.js and i removed it replace with jquery.js
'assets/dist/frontend/jquery-3.3.1.min.js',
'assets/dist/frontend/app.min.js',
'assets/dist/datatables.js'

Довелося зіткнутися з тим же питанням. Причина така ж, як і @merv. Випуск був із компонентом календаря, доданим на сторінку. Сам компонент додає модальну функцію, яка буде використовуватися у спливаючому вікні календаря.

Тож причини зламати спливаючу модель будуть однією або декількома з наступних

• Завантаження декількох версій / файлів для завантажувальних файлів (мінімізовані ...)
• Додавання зовнішнього календаря на сторінку, де використовується завантажувальна програма
• Додавання користувальницьких попереджень або спливаючих бібліотек на сторінку
• Будь-яка інша бібліотека, яка додає поведінку спливаючих елементів

під час роботи з Angular (5) я стикаюся з тим же питанням, але в моєму випадку я вирішив наступне:

компонент.html

<button type="button" class="btn btn-primary"  data-target="#myModal" 
(click)="showresult()">fff</button>

<div class="modal" id="myModal" role="dialog"  tabindex="-1" data-backdrop="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

компонент.ц

ПРИМІТКА: потрібно імпортувати jquery у файл ts як "оголосити var $: any;"

  showresult(){
    debugger
    $('#myModal').modal('show');
  }

Зміни, які я внесла:

• видалено "data-toggle =" modal "з тегу Button (завдяки @miCRoSCoPiC_eaRthLinG ця відповідь мені тут допомагає) у моєму випадку його модальний показ, тому я створив (click) =" showresult () "

• всередині компонента.ts потрібно оголосити Jquery ($), а всередині натиснути кнопку кнопки showresult () викликати "$ ('# myModal'). modal ('show');"

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

statusCode: {
    410: function (request, status, error) { //custom error code

        document.getElementById('modalbody').innerHTML = error;
        $('#myErrorModal').modal('toggle')
    }
},
error: function (request, error) {

    document.getElementById('modalbody').innerHTML = error;
    $('#myErrorModal').modal('toggle')
}

Я видалив одну появу:

$ ('# myErrorModal'). модальний ('тумблер')

і це працювало як магія!