마음의 안정을 찾기 위하여 - [JQuery] 부트 스트랩 - JQuery를 이용한 윈도우 팝업창 뛰우기
2248344
60
338
관리자새글쓰기
태그위치로그방명록
별일없다의 생각
dawnsea's me2day/2010
색상(RGB)코드 추출기(Color...
Connection Generator/2010
최승호PD, '4대강 거짓말 검...
Green Monkey**/2010
Syng의 생각
syng's me2DAY/2010
천재 작곡가 윤일상이 기획,...
엘븐킹's Digital Factory/2010
[JQuery] 부트 스트랩 - JQuery를 이용한 윈도우 팝업창 뛰우기
Web, Script/DHTML, HTML | 2023/06/13 13:33
https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-close-bootstrap-modal



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Close Bootstrap Modal Window on Button Click</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function(){
        // Open modal on page load
        $("#myModal").modal('show');
 
        // Close modal on button click
        $(".btn").click(function(){
            $("#myModal").modal('hide');
        });
    });
</script>
<style>
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div id="myModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal Title</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <p>This is a simple Bootstrap modal. Click the "Close button", "cross icon" or "dark gray area" to close or hide the modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Close Modal</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

2023/06/13 13:33 2023/06/13 13:33
Article tag list Go to top
View Comment 0
Trackback URL :: 이 글에는 트랙백을 보낼 수 없습니다
 
 
 
 
: [1] ... [4][5][6][7][8][9][10][11][12] ... [873] :
«   2024/02   »
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29    
전체 (873)
출판 준비 (0)
My-Pro... (41)
사는 ... (494)
블로그... (22)
My Lib... (32)
게임 ... (23)
개발관... (3)
Smart ... (1)
Delphi (93)
C Builder (0)
Object... (0)
VC, MF... (10)
Window... (1)
Open API (3)
Visual... (0)
Java, JSP (2)
ASP.NET (0)
PHP (5)
Database (12)
리눅스 (29)
Windows (25)
Device... (1)
Embedded (1)
게임 ... (0)
Web Se... (2)
Web, S... (21)
잡다한... (6)
프로젝트 (0)
Personal (0)
대통령... (9)
Link (2)