2013-11-21 3 views
0

Я использую Bootstrap 3, я создал NavBar, содержащий ссылку для запуска bootstrap modalbox.Ошибка: Bootstrap Modal Box

Через несколько секунд модальбокс замерзает! Когда я нажимаю на него, он исчезает и все ошибки макета сайта (изменение цвета фона, положение меню ...) .. тогда я не могу его открыть! Если обновить страницу ...

Я отметил, что ModalBox добавляет «модальный-открытый» класс <body>, но при закрытии, класс все еще здесь ...

LINK: www.tafraout.net
Нажмите на: "Эспас", чтобы: Новичок запустить ModalBox

BUG SCREENSHOT: http://d.pr/i/6Tpf

ответ

1

Когда я пытаюсь открыть модальное непосредственно из консоли JavaScript, например, путем оценки $("#LoginModal").modal("toggle");, он прекрасно работает. Это означает, что вы не открываете его правильно; на самом деле, это атрибут href, который пропускает вещь.

Когда вы нажмете на свою ссылку, Bootstrap перехватит событие и переключит модальный диалог; однако, Javascript делает распространение события (см. this topic для получения дополнительной информации), а это значит, что ваша ссылка затем выполняется нормально. Поскольку вы помещаете в него абсолютный URL-адрес, он попытается отправить вас на новую страницу.

Два способа решить эту проблему: либо вы ставите # в качестве цели ссылки, но вы все равно будете перемещаться в своем окне, потому что браузер сосредоточит верхнюю часть страницы. В вашем случае это не будет плохо, но это может привести к некоторым странным поведением, если вы не знаете этого трюка.

Второе решение - прикрепить событие к ссылке и переключить модальное вручную; например, с помощью JQuery:

$("#yourLink").on("click", function() { 
    $("#LoginModal").modal("toggle"); // Toggle the modal 
    return false; 
}); 

return: false; остановит распространение события, и поэтому ваша ссылка не последовало (ничего не изменится на странице); если вы не хотите использовать значение return, вы можете просто вызвать stopPropagation() на объект события (не забудьте включить его в функции:

$("#yourLink").on("click", function(e) { 
    $("#LoginModal").modal("toggle"); // Toggle the modal 
    e.stopPropagation(); 
}); 
+0

Спасибо, ребята Это работает, я имею! удалил атрибут href! Я попробую решение Js тоже улучшить опыт. Еще раз спасибо Проголосовал –

1

Попробуйте обновить это ваш Se Connecter

<a data-target="#LoginModal" data-toggle="modal" href="http://www.tafraout.net/"><i class="glyphicon glyphicon-log-in"></i> 
Se Connecter 
</a> 

в

<a data-target="#LoginModal" data-toggle="modal" > <i class="glyphicon glyphicon-log-in"></i> 
Se Connecter 
</a> 

без href атрибута, который должен работать