내 모달을 부트 스트랩에서 사용하지 않는 다른 사이트와 통합합니다. 부트 스트랩을 통해 각 구성 요소의 Javascript를 분리 할 수 있습니다. 그러나 CSS는 어떻습니까? bootstrap.css에 링크하면 전체 사이트가 변경됩니다. Modal이 작동하기에 충분한 CSS가 필요합니다. (나는 CSS 파일을 살펴보고 내가 필요로하는 것을 추측했지만 작동하지 않았다.)* 그냥 * 부트 스트랩 모달 사용
업데이트
부트 스트랩 v3.2.5의 등 덕분 v3.2.5의로 확인 @Gruber합니다.
@ Fisu에서 설명한대로 설정을 사용자 지정하려면 링크가 여전히 here입니다.
설명대로 modal이 아닌 4 가지 옵션을 선택해야합니다. Toggle All (모두 켜기)을 클릭하여 시작하여이 모든 4 가지 옵션을 선택하십시오. 자바 스크립트 구성 요소 에서
Buttons에서Close icon 구성 요소Component animations (for JS)에서 공통 CSS 에서 자바 스크립트 구성 요소Modals을 이렇게하면 필요한 CSS를 모두 가져와야합니다. 다음 다시 모든 것을 해제 토글 모두를 선택하여 시작하고 두 플러그인 선택의 jQuery 플러그인 섹션 : 구성 요소매직에서
Transitions에 링크 된 에서
Modals를 (모든 종류의 필요 당신이 필요한 모든, JS (bootstrap.min.js)과 CSS를의) 애니메이션 (만 조금 수정해야합니다 bootstrap.css는) 아래 설명했다. 해당 페이지 하단으로 이동하여 을 선택하고을 다운로드하여 패키지를 가져 오십시오.
마지막으로 한 가지주의 할 점이 있습니다[email protected]이 말한대로, "CSS의 시작 부분에 여전히 많은 정규화가 추가되었지만 안전하게 삭제할 수 있습니다 (html에서 img로, css는 .img-responsive 이후로 유지)."이것은 여전히 유효합니다. 나는 또한 조동사 몇 가지의 스타일을 강제로 다음과 같은 CSS를 추가 :이 그냥 글꼴이 원래 모달 스타일링 유사하며 페이지 스타일에 적용되지 않습니다 보장
.modal { font-family:Arial,Helvetica,sans-serif!important}
.modal p {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important; color:#000 !important; font-size:14px;}
을 (아마 조금 불통 될 수있다 더). 주목할 마지막 항목은 http://cssminifier.com/을 실행하여 CSS를 축소 할 수 있습니다. 몇 KB를 저장합니다. 모달 구현
:
나뿐만 아니라 그냥이 마무리 있습니다. 코드에 설정된 14 일 동안 사용자에게 메시지를 숨길 수있는 옵션을 제공하기 때문에 쿠키 플러그인을 사용하고 있습니다. 여기에 코드 블록은 당신이 무엇을 필요가있다 : 끝 </head> 태그가 작동
이것은 아마 당신의 CSS의 어느 한 후 문서의 <head>에 가야한다, 그래서 심지어 직전.
<!-- CSS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="modalsonly/css/bootstrap-3.2.0.min.css">
<!-- END CSS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->
이것은 당신의 <body> 내에서 이동합니다. 이렇게하면 모달이 생성되고 포함 된 CSS가 숨길 것입니다.
<!-- HTML NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->
<div class="modal fade " id="important-msg" tabindex="-1" role="dialog" aria-labelledby="important-msg-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="important-msg-label">Message Title!</h4>
</div>
<div class="modal-body">
<p>Message text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="dont-show-again">Don't Show Again</button>
</div>
</div>
</div>
</div>
<!-- END HTML NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->
이 코드는 바로 종료 </body> 태그 앞에 가야한다. jQuery, 부트 스트랩 및 필요한 쿠키 플러그인을로드합니다.
<!-- PLUGINS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->
<!-- Latest jQuery (1.11.1) -->
<script src="modalsonly/js/jquery-1.11.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="modalsonly/js/bootstrap-3.2.0.min.js"></script>
<!-- jQuery Cookie -->
<script src="modalsonly/js/jquery.cookie-1.4.1.min.js"></script>
<!-- END PLUGINS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->
마지막으로이 스크립트를 위의 플러그인 뒤에 추가 할 수 있습니다. 이것은 약간의 상황으로 사용자 정의 된 것입니다. 쿠키가 설정되어 있지 않은 경우에만 모달을 시작하고 모달을 시작하면 모달을 시작하지 못하도록 쿠키를 만드는 다시 표시 안 함을 클릭하는 기능이 만들어졌습니다.
<script>
//Start the DOM ready
$(document).ready(function() {
//CODE NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP
//Check to see if the cookie exists for the Don't show again option
if (!$.cookie('focusmsg')) {
//Launch the modal when you first visit the site
$('#important-msg').modal('show');
}
//Don't show again mouse click
$("#dont-show-again").click(function() {
//Create a cookie that lasts 14 days
$.cookie('focusmsg', '1', { expires: 14 });
$('#important-msg').modal('hide');
}); //end the click function for don't show again
//END CODE NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP
}); //End the DOM ready
</script>
희망이 있습니다. 행운을 빕니다. 여기
야. 굉장한 대답. – Haymaker87
고마워요, 다행했습니다. 이 글을 읽는 누군가가 그 대답이 시대에 뒤 떨어진 것으로 판단되면 알려 주시기 바랍니다. –
Bootstrap 3.3.5 버전에서 이것은 여전히 유효하고 완벽하게 작동 함을 알 수 있습니다. 애니메이션 효과가 효과적이기 위해서는 jQuery 플러그인 구성 (** Magic ** 아래)에 [transitions.js] (http://getbootstrap.com/javascript/#transitions)를 추가해야합니다. – Gruber
Bootstrap customize section으로 이동하고 구성 요소 섹션에서 모달 옵션 만 선택하십시오. 파일을 다운로드하고 bootstrap.css 파일을 열고 전체 내용을 자신의 CSS 파일에 복사하십시오.
필요한 특정 부품을 찾으려고하면 중요한 항목을 놓칠 가능성이 높습니다. 게다가 자체적 인 모달 CSS는 너무 크지 않습니다.
업데이트는 : 링크는 지금 here입니다. 나는 여전히 CSS의 시작 부분에 많은 정규화를 추가했지만 안전하게 삭제할 수 있음을 발견했다. (html에서 img로, css는 .img-responsive 앞으로 유지했다.)
이것은 거의 나를 위해 일했다. 나는 .modal-dialog 클래스에 대한 사용자 정의 너비를 설정했습니다. 전체 부트 스트랩을 사용하면 올바르게 작동하지만 모달 사용자 정의 파일을 사용하면 대화 상자의 절반이 여전히 기본 크기입니다. – xr280xr
나는 다시 시도해 보았다. 나는 무엇이 바뀌 었는지 모른다. – xr280xr
링크가 [here] (http://getbootstrap.com/customize/)입니다. 나는 여전히 CSS의 시작 부분에 많은 정규화를 추가했지만 안전하게 삭제할 수 있음을 발견했다. (html에서 img로, css는 .img-responsive 앞으로 유지했다.) –
는 부트 스트랩 3 사용하여 이동하십시오 CSS를 포함하면
를, JS는 사용 정확히 동일합니다
<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</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>
정확히 내가 무엇을 찾고 있었는지! – Dinesh
내가 잘 부트 스트랩 사용을 기억한다면 스타일 시트를 만들기위한'less'. 그래서 모든 규칙에 접두어를 붙이는 것이 쉬워야합니다. '.my-project' 클래스를 주변 컨테이너에 추가합니다. 또는 이것이 iframe sandboxing을 옵션으로 사용하면 요소가 보이는 영역이 iframe의 차원으로 제한된다는 것을 의미합니다. –
여기에서 작업 할 수있었습니다. Modal JS Component와 Modal JQuery Plugin을 선택해야한다. http://twitter.github.io/bootstrap/customize.html – mdundas
thx T. iFrame 샌드 박싱에 대한 아이디어가있는 것 같습니다.다른 문제에 빠지면 이걸 할거야 ... – mdundas