2015-08-18 2 views
0

На мобильных устройствах мода Bootstrap 3 остается, когда я нажимаю кнопку «Назад».Bootstrap Modal остается на задней кнопке - только для мобильных телефонов

Вот мой HTML код:

<a id="link-prof" href="" class="dark-blue" data-toggle="modal" data-target="#leavingModal">Link Here<span class="glyphicon glyphicon-chevron-right"></span></a>< 

<div id="leavingModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <a class="close-btn" data-dismiss="modal"></a> 
      <div class="modal-body"> 
       <h4 class="modal-title">You are now leaving this page</h4> 
       <p>Text here and here</p> 
      </div> 
     <div class=" text-center"> 
      <button type="button" class="btn btn-lg btn-link" data-dismiss="modal">Cancel</button> 
      <button id="link-hcp" type="button" class="btn btn-lg btn-danger" data-dismiss="modal" data-href="http://www.anotherpage.com" data-target="_self">I Agree</button> 
     </div> 
    </div> 
</div> 

У меня также есть это в моем файле JavaScript (не уверен, если это имеет какое-либо влияние на эту проблему):

$('button').on(touchClick,function(){ 
    var loc = $(this).attr("data-href"); 
    if(loc!='' && loc!=null) window.location = loc; 
}); 

Когда я нажмите на ссылку, появится модальная мода. Затем я нажимаю кнопку «Я согласен» на модальном, и я беру на новую страницу. На рабочем столе, когда я нажимаю кнопку «Назад», модальной формы больше нет. Мне нужно было бы снова щелкнуть ссылку, чтобы модальность появилась (что желательно). Тем не менее, на мобильном устройстве (я попробовал iPad и Android) модальность остается при нажатии кнопки «Назад».

После некоторых исследований, я наткнулся на этот код:

$('#leavingModal').on('hidden.bs.modal', '.modal', function() { 
    $(this).removeData('bs.modal'); 
}); 

... но это даже не огонь. Я также пробовал разные селекторы и не имел успеха.

Буду признателен за помощь в определении решения.

Спасибо.

Стивен

ответ

0

Чтобы уничтожить самозагрузки 3 модели полностью вы можете сделать как это

$("#leavingModal").on('hidden.bs.modal', function() { 
    $(this).data('bs.modal', null); 
}); 

Или

$("#leavingModal").removeClass('fade').modal('hide') 

Примечание: эффекты перехода на модальный может вызвать проблемы, вы будете необходимо удалить .fade класс из модального, чтобы скрыть его полностью.

+0

К сожалению, ни одна из них не решила проблему. Модаль остался. Я также вручную удалил fade из своего html. – user282648

+0

вы можете указать ссылку – Shehary

+0

Это в интранете, поэтому мне придется воссоздать тестовую версию. Несмотря на это, я смог решить проблему, «убив» модальный (используя второй метод выше), прежде чем перейти к следующей странице. Это сработало хорошо. Благодарю. – user282648

0

Мы столкнулись с этой проблемой в веб-и мобильном приложении, разработанном с использованием AngularJS_v1.4.7 и Bootstrap_v3.0. Он был исправлен, как описано в ссылке ниже. Посмотрите, подходит ли это для вас.

https://stackoverflow.com/a/34351848/1069893

Смежные вопросы