W jaki sposób Bootstrap ukrywa modal? - javascript, twitter-bootstrap-3, bootstrap-modal

Czy bootstrap używa do tego Javascript? Na przykład najpierw ładowany jest HTML, a następnie kod JS analizuje atrybuty mojego modalu bootstrap i dodaje do tego funkcjonalność (zwiększanie, zmniejszanie itp.)? Czy znajduje się gdzieś w bootstrap.js?

Wiem, że uruchamia na przykład niektóre zdarzenia, więc muszą być zdefiniowane w kodzie źródłowym Bootstrap.

Odpowiedzi:

Tak. Korzysta z pracy Javascript Frame Jquery za wszystkie działania. Bootstrap.js używa jquery i pokazuje modal.

Wykorzystuje HTML5 atrybut danych zadzwonić zadzwoń do modalu.

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

Cała akcja dzieje się w bootstrap z powodu następujących plików. Wszystkie klasy można znaleźć w „bootstrap.min.css”

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Mam nadzieję, że tego właśnie szukasz.

Tak, możesz wyszukać następujący kod w boostrap / modal.js

Na przykład,

 $(document).on("click.bs.modal.data-api", "[data-toggle="modal"]", function (e) {
var $this   = $(this)
var href    = $this.attr("href")
var $target = $($this.attr("data-target") || (href && href.replace(/.*(?=#[^s]+$)/, ""))) // strip for ie7
var option  = $target.data("bs.modal") ? "toggle" : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())

if ($this.is("a")) e.preventDefault()

$target.one("show.bs.modal", function (showEvent) {
if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown
$target.one("hidden.bs.modal", function () {
$this.is(":visible") && $this.trigger("focus")
})
})
Plugin.call($target, option, this)
})