부트스트랩 모달 닫기버튼만 보이도록 하기 > HTML
HTML

부트스트랩 모달 닫기버튼만 보이도록 하기

조회 162회 댓글 0건

8396f5ea84fa3033d0d9287826b926c8_1659443323_7496.png
원하는 것은 이런것입니다.

메시지를 보여주고 닫기 버튼만 있어서 닫을 수 있게 하는것이 없네요. 많이 사용할텐데 좀 만들지? 버전이 5.2까지 올라오면서 왜? 그랬을까 하는 생각이 먼저 듭니다.


** 부트스트랩 모달 닫기버튼만 보이도록 하기 **

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(window).load(function(){
      $('#myModal').modal('show');
});
$(function () {
   $('#modal').modal('toggle');
});
</script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>




위에 보면 버전이 낮을것을 볼 수 있다. 최신 버전은 아래를 참고

Fullscreen Modal

Modal · Bootstrap v5.2 (getbootstrap.com) 

Bootstrap 5 Modal (w3schools.com) 

Bootstrap Modal - examples & tutorial (mdbootstrap.com) 




  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
전체 11건 1 페이지
  • profile_image 파일 첨부할때 사용합니다.기본이 모든 파일로 되어 있는데 특정 워드파일만 받고 싶다든지 아니면jpg 이미지만 받고 싶을때 선택을 그것만 가능하게 하는 방법에 대한 것입니다. accept 속성에 MIME 값을 넣어주면 됩니다.    <!-- 모든것을 보여줄 때는 아래처럼 하면 된다: 순서대로 오디오,동영상,이미지 -->  <input type="file" accept="audio/*">  <input type="file…
  • profile_image 부트스트랩에서는 대부분 영문의 약자를 생각하면 되면 되는데 문제는 왼쪽, 오른쪽이 아니라 시작, 끝 인것이 있다는 것이다.마진: m패딩: p * 위, 아래top: tbottom: b * 왼쪽 오른쪽 보다는 시작과 끝으로 생각하면 된다.left: sright: e * 포함이다.즉 위아래는 top, bottom이 되고 x는 left, right가 되는것이다.위아래:  y ( left / right )양옆: x (top / bottom)위와 별도로 …
  • profile_image 부트스트랩 연습하는데 한쪽으로 쏠립니다.다운데로 버튼을 보내고 싶은데요 생각처럼 되지 않아 찾아 보아 정리 한것입니다.다른것들도 방법은 비슷합니다. 가운데 정렬하고 싶을대 말입니다. 테이블 같은것도 비슷한 원리 입니다. 부트스트랩 버튼을 가운데(중앙) 정렬하기 <div class="row">  <div class="col text-center">    <!-- <button class="btn btn-primar…
  • profile_image 빌더는 처음 사용하는 개발자에게는 상당히 유용 합니다.다운로드를 클릭해야 소스를 볼 수 있습니다.부트 스트랩 빌더https://www.layoutit.com/build 부트스트랩 레이아웃http://shoelace.io/만들어진 레레이아웃 위것 예제https://webruden.tistory.com/76화면 크기별 레이아웃https://blogpack.tistory.com/823
  • profile_image DivTable.com 이란곳에서 가져온것입니다.이 사이트 방문하면 마우스로 끌어서 쉽게 만들 수 있는 방법을 보여 줍니다.테이블은 표이기 때문에 이것으로 레이아웃을 만들지 말라는것입니다. 표 인줄 착각할 수 있기 때문에 그래서 레이아웃 짤때는 아무의미가 없는 div 사용해야 된다는 것입니다.표 형식으로 된것은 당연히 table 사용해야 되는데 이때 div 쓰면 이 또한 바보 입니다.부트스트랩 테이블https://mdbootstrap.com/d…
  • profile_image 보통 찾으면 테이블 안에 있는 것을 어떻게 정렬 하는것에 대해서 나왔는데요.아래 부분은 그것이 아니라 테이블 자체를 왼쪽, 오른쪽 지정 하는것입니다. 부트스트랩은 기본적으로 가운데로 지정 되는것 같습니다.https://stackoverflow.com/questions/38160951/how-do-i-horizontally-center-a-table-in-bootstrap justify-content-startjustify-content-cent…