Bootstrap如何隐藏模态

How does Bootstrap hide the modal?

本文关键字：隐藏 模态 何隐藏 Bootstrap      更新时间：2023-09-26

引导程序是否使用Javascript？比如，首先加载HTML，然后JS代码分析我的引导模式的属性，并为此添加功能（淡入、淡出等）？它包含在bootstrap.js中吗？

例如，我知道它会触发一些事件，所以它们必须在Bootstrap的源代码中定义。

是。它使用Javascript框架工作Jquery进行所有操作。Bootstrap.js使用jquery并显示模态。

它使用HTML5数据属性来调用modal。

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

引导程序中发生的所有操作都是由于以下文件。你可以在'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>

我希望这就是你想要的。

是的，您可以从boostrap/modal.js 中搜索以下代码

例如，

 $(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)
  })
相关文章：