매일매일 배워야 하는 부트스트랩 경고 상자 플러그인

매일매일 배워야 하는 부트스트랩 경고 상자 플러그인_javascript 기술

WBOY

풀어 주다： 2016-05-16 15:04:01

원래의

1408명이 탐색했습니다.

경고 메시지는 주로 최종 사용자에게 경고나 확인 메시지 등의 정보를 표시하는 데 사용됩니다. 경고 플러그인을 사용하면 모든 경고 메시지에 해제 기능을 추가할 수 있습니다.

이 플러그인의 기능을 별도로 참조하려면 Alert.js를 참조해야 합니다. 또는 Bootstrap 플러그인 개요 장에서 언급한 대로 bootstrap.js 또는 bootstrap.min.js의 축소된 버전을 참조할 수 있습니다.

1. 사용법
다음 두 가지 방법으로 경고 상자 해제 기능을 활성화할 수 있습니다.
1. 데이터 속성을 통해: 데이터 API(Data API)를 통해 취소 가능한 기능을 추가합니다. 닫기 버튼에 data-dismiss="alert"만 추가하면 경고 상자에 닫기 기능이 자동으로 추가됩니다.

<a class="close" data-dismiss="alert" href="#" aria-hidden="true">
 &times;
</a>

로그인 후 복사

2. JavaScript를 통해: JavaScript를 통해 취소 가능한 기능을 추가합니다:
$(".alert").alert()

2. 간단한 예
경고 상자는 클릭 시간의 정보 상자입니다.
1. 기본 예시

<div class="alert alert-warning">                   
 <button class="close" type="button" data-dismiss="alert">            
  <span>&times;</span>                     
 </button>                        
 <p>                          
  警告：您的浏览器不支持！                       
 </p>                          
</div>

로그인 후 복사

2. 페이드 인 및 페이드 아웃 효과 추가

JavaScript를 사용하는 경우 data-dismiss="alert"를 대체할 수 있습니다

//JavaScript 方法

$('.close').on('click', function() {
 $('#alert').alert('close');
})

로그인 후 복사

경고 플러그인에는 두 가지 유형의 이벤트가 있습니다.

//事件，其他雷同

$('#alert').on('close.bs.alert', function() {
 alert('当 close 方法被触发时调用！');
});

로그인 후 복사

Bootstrap에 대한 자세한 내용은 특별 주제인 Bootstrap 학습 튜토리얼

을 참조하세요.

위 내용은 이 글의 전체 내용입니다. 부트스트랩 경고 상자 플러그인을 배우는 모든 분들에게 도움이 되기를 바랍니다.