무회blog

BootStrap 모달창 넣기 본문

js/jQuery

BootStrap 모달창 넣기

최무회 2022. 6. 13. 03:15 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
   
</head>

<body>
<!-- Button trigger modal  모달 테스트 5.2.0 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop" >
  버트클릭 창열리니?
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        모달창이 열린다. 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>
저작자표시 비영리 변경금지

'js > jQuery' 카테고리의 다른 글

js(jQuery) Ajax ,Test_002 하기, (https url경로의 json 데이터 load 해서 읽어 오기)  (0) 2022.06.19
js(jQuery) Ajax ,Test_001 하기, (txt 파일 load 해서 읽어 오기)  (0) 2022.06.19
//지정내용, 그리드 제목 없애기 / jQuery_css  (0) 2022.06.14
제이쿼리라이브러리 , jquery-3.4.1.js  (0) 2020.04.09
Ajax 메소드  (0) 2020.04.09
'js/jQuery' Related Articles more
Comments