Bootstrap 학습에서 모달 상자 사용에 대한 간략한 분석

이 기사에서는 Bootstrap의 모달 상자를 살펴보고 모달 상자의 크기를 변경하고 모달 상자에 원격 콘텐츠를 로드하는 방법을 소개합니다. 모든 사람에게 도움이 되기를 바랍니다.

이 튜토리얼에서는 매우 유용한 Bootstrap jQuery 플러그인인 Modal Box에 대해 설명합니다.

Bootstrap Modal은 사용자 정의가 가능하고 반응성이 뛰어난 경량 다목적 JavaScript 팝업입니다. 이를 사용하여 웹 사이트에 경고 창, 비디오 및 이미지를 표시할 수 있습니다. Bootstrap으로 구축된 웹사이트는 모달을 사용하여 이용 약관(등록 프로세스의 일부), 비디오, 소셜 미디어 위젯까지 표시할 수 있습니다.

더 나은 이해를 돕기 위해 부트스트랩 모달 상자의 다양한 구성 요소를 살펴보겠습니다. [관련 추천: "부트스트랩 튜토리얼"]

부트스트랩 모달 상자는 크게 머리글, 본문, 바닥글 세 부분으로 나뉩니다. 각 부분에는 고유한 의미가 있으므로 올바르게 사용해야 합니다. 이에 대해서는 나중에 논의하겠습니다. Bootstrap 모달의 가장 흥미로운 점은 무엇입니까? 이를 사용하기 위해 JavaScript 코드를 작성할 필요가 없습니다! 모든 코드와 스타일은 Bootstrap에 의해 사전 정의됩니다. 당신이 해야 할 일은 올바른 태그와 속성을 사용하여 이를 실행하는 것뿐입니다.

기본 모달 상자

기본 모달 상자는 다음과 같습니다.

모달 상자를 실행하려면 링크나 버튼을 추가해야 합니다. 요소를 트리거하는 태그는 다음과 같습니다.

<a href="#" class="btn btn-lg btn-success" 
   data-toggle="modal" 
   data-target="#basicModal">Click to open Modal</a>

링크 요소에는 data-toggle 및 data-target이라는 두 가지 사용자 정의 데이터 속성이 있습니다. 토글은 부트스트랩에게 수행할 작업을 알려주고, 대상은 부트스트랩에게 열려는 요소를 알려줍니다. 따라서 해당 링크를 클릭할 때마다 ID가 "basicModal"인 모달 상자가 나타납니다. data-toggle和data-target。toggle告诉Bootstrap要做什么，target告诉Bootstrap要打开哪个元素。所以每当点击这样的链接时，都会出现一个id为“basicModal”的模态框。

现在让我们看看定义模态框所需的代码：

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 id="Modal-nbsp-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <h3 id="Modal-nbsp-Body">Modal Body</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
  </div>
</div>

模态框的父div应具有与上述触发元素中使用的相同的ID。在我们的例子中是id="basicModal"。

注意：父模态框元素中自定义属性aria-labelledby和aria-hidden让其可被访问。让所有人都能访问你的网站是一个很好的做法，所以你应该使用这些属性，因为它们不会对模态框的普通功能产生负面影响。

在模态框的HTML代码中，我们可以看到一个封装div嵌套在父模态框div内。这个div的类modal-content告诉bootstrap.js在哪里查找模态框的内容。在这个div内，我们需要放置前面提到的三个部分：头部，正文和页脚。

模态框头部，顾名思义，用于给模态添加一个标题或者如“x”关闭按钮等其他元素。这些元素还应该有一个data-dismiss属性告诉Bootstrap哪个元素要隐藏。

然后我们看一下模态框的正文。可以把它看做一个打开的画布，你可以在其中添加任何类型的数据，包括嵌入YouTube视频，图像或者任何其他内容。

最后，我们看一下模态框的页脚。该区域默认为右对齐。在这个区域，你可以放置“保存”，“关闭”，“接受”等操作按钮，这些按钮与“模态框”需要表现的行为相关联。

改变模态框的大小

之前我提到Bootstrap模态框是响应式的、灵活的。我们将在本节中看到如何更改其大小。

Bootstrap 3.3.7中模态框有两种新的风格：大和小。给divmodal-dialogdiv 添加一个修饰符类modal-lg可以获得一个更大的模态框，添加modal-sm可以获得一个更小的模态框。

使用jQuery激活模态框

模态框是一个jQuery插件，所以如果你想使用jQuery控制模态框的话，你需要在模态框的选择器上调用.modal()

이제 모달을 정의하는 데 필요한 코드를 살펴보겠습니다.

$('#basicModal').modal(options);

모달의 상위 div는 위의 트리거 요소에 사용된 것과 동일한 ID를 가져야 합니다. 우리의 경우에는 id="basicModal"입니다.

참고: 상위 모달 요소의 사용자 정의 속성 aria-labelledby 및 aria-hidden을 사용하면 액세스할 수 있습니다. 모든 사람이 웹 사이트에 액세스할 수 있도록 하는 것이 좋은 습관이므로 이러한 속성은 모달의 일반적인 기능에 부정적인 영향을 미치지 않으므로 사용해야 합니다. 🎜🎜모달 상자의 HTML 코드에서 상위 모달 상자 div 내에 중첩된 래퍼 div를 볼 수 있습니다. 이 div의 클래스 modal-content는 bootstrap.js에 모달 콘텐츠를 찾을 위치를 알려줍니다. 이 div 안에는 앞서 언급한 세 부분인 머리글, 본문, 바닥글을 배치해야 합니다. 🎜🎜모달 상자 헤더는 이름에서 알 수 있듯이 제목이나 "x" 닫기 버튼과 같은 기타 요소를 모달에 추가하는 데 사용됩니다. 이러한 요소에는 Bootstrap에 숨길 요소를 알려주는 data-dismiss 속성도 있어야 합니다. 🎜🎜그럼 모달박스의 본체를 살펴보겠습니다. 삽입된 YouTube 동영상, 이미지 또는 기타 콘텐츠를 포함하여 모든 유형의 데이터를 추가할 수 있는 열린 캔버스라고 생각하세요. 🎜🎜마지막으로 모달의 바닥글을 살펴보겠습니다. 이 영역은 기본적으로 오른쪽 정렬되어 있습니다. 이 영역에는 "저장", "닫기", "수락" 등과 같은 작업 버튼을 배치할 수 있습니다. 이러한 버튼은 "모달 상자"가 표시해야 하는 동작과 연결됩니다. 🎜🎜모달 상자 크기 변경🎜🎜앞서 Bootstrap 모달 상자는 반응성이 뛰어나고 유연하다고 언급했습니다. 이번 섹션에서는 크기를 변경하는 방법을 살펴보겠습니다. 🎜🎜Bootstrap 3.3.7의 모달 상자에는 크고 작은 두 가지 새로운 스타일이 있습니다. 더 큰 모달 상자를 얻으려면 div modal-dialogdiv에 수정자 클래스 modal-lg를 추가하고 더 큰 모달 상자를 얻으려면 modal-sm을 추가하세요. 모달 상자. 🎜🎜jQuery를 사용하여 모달 상자 활성화🎜🎜모달 상자는 jQuery 플러그인이므로 jQuery를 사용하여 모달 상자를 제어하려면 선택기에서 .modal()을 호출해야 합니다. 모달 상자의 코드> 방법. 예: 🎜<pre class='brush:php;toolbar:false;'>var options = { &quot;backdrop&quot; : &quot;static&quot; }</pre>🎜여기의 "옵션"은 사용자 정의 동작에 전달할 수 있는 JavaScript 개체입니다. 예: 🎜<pre class='brush:php;toolbar:false;'>$(&amp;#39;#basicModal&amp;#39;).on(&amp;#39;shown.bs.modal&amp;#39;, function (e) { alert(&amp;#39;Modal is successfully shown!&amp;#39;); });</pre>🎜사용 가능한 옵션은 다음과 같습니다. 🎜<ul> <li> <strong>backdrop</strong>：这可以是<code>true或static。这定义你是否希望用户能够通过单击背景来关闭模态。

keyboard：如果设置为true则模态框将通过ESC键关闭。

show：用于打开和关闭模态框。它可以是true或false。

remote：这是最炫酷的选择之一。它可以用于使用jQuery的load()方法加载远程内容。你需要在此选项中指定外部页面。默认设置为false。

Bootstrap模态框的事件

你可以通过使用在打开和关闭模态框时触发的各种事件来进一步自定义Bootstrap模态的普通行为。这些事件必须使用jQuery的.on()方法绑定。

可用的事件有：

• show.bs.modal：在模态框打开之前被触发。
• shown.bs.modal：在显示模态框后触发。
• hide.bs.modal：在模态框被隐藏之前触发。
• hidden.bs.modal：在模态关闭后触发。
• loaded.bs.modal：使用上述的remote选项在远程内容成功加载到模态框的内容区域时触发。

你可以像这样使用上述之一的事件：

$('#basicModal').on('shown.bs.modal', function (e) {
    alert('Modal is successfully shown!');
});

在模态框中加载远程内容

在Bootstrap模式中加载远程内容有三种不同的方法。

第一种方法，如上所述,是使用对象options中的remote选项。其他两种方式都是没有JavaScript的，如下所示。

你可以为模态框的触发元素中的href属性提供一个值。在我们的例子中，触发器是一个链接。例如，我们可以不使用我们之前提到的值#而将URL包含在特定页面中：

<a class="btn btn-lg btn-default" 
   data-toggle="modal" 
   data-target="#largeModal" 
   href="remote-page.html">Click to open Modal</a>

你还可以为触发元素提供data-remote的自定义数据属性，而不是使用href属性。例如：

<a class="btn btn-lg btn-default" data-toggle="modal" 
   data-target="#largeModal" 
   data-remote="remote-page.html">Click to open Modal</a>

结论

模态框是Bootstrap 3提供的最好的插件之一。对于初级设计师来说，它是不需要任何JavaScript代码而在弹出式画面中加载内容的最佳方式之一。

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

위 내용은 Bootstrap 학습에서 모달 상자 사용에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!