jQuery와 결합된 부트스트랩을 사용하여 간단한 모달 대화 상자 구현

안녕하세요, 안녕하세요, 저는 다시 왔습니다. 오늘은 업무에서 많이 사용하는 플러그인인 모달 다이얼로그 박스 사용법에 대해 알려드리겠습니다. 아마도 당신은 당신의 작업에서 많은 페이지를 접했고 상호 작용을 위해 모달 대화 상자를 사용해야 할 것입니다.이제 그 사용법을 함께 이해합시다.

먼저 부트스트랩의 css 파일, 부트스트랩의 js 파일, jQuery의 js 파일 세 개의 파일을 준비해야 합니다 .

다음과 같이 헤드에 세 줄의 파일을 소개합니다.

<link rel="stylesheet" href="../vendor/bootstrap.css">
<script src="../vendor/jquery-3.6.0.js"></script>
<script src="../vendor/bootstrap.bundle.js"></script>

그런 다음 공식 웹사이트에 가서 부트스트랩 코드를 복사하고 cv God of War를 만들었습니다. 나는 지금 말하고 싶은 것이 이것을 기반으로 일련의 작업을 완료하는 것이기 때문에 코드에서 내용을 수정했습니다. 안에 있는 텍스트를 입력창으로 변경했는데 결국 프로젝트는 사용자와 입력창의 상호작용이겠죠?

html 코드는 다음과 같습니다.

<button class="btn evidence_show btn btn-success" id="btn1">点我打开模态框</button>
<p id="word"></p>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                    onclick="close_bg()">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">
                <input id="inp" value="" type="text">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="close_bg()" data-dismiss="modal">关闭</button>
                <button type="button" onclick="submit()" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

모달 상자는 기본적으로 숨겨져 있으며 열면 다음과 같습니다.

대화 상자의 왼쪽 상단 모서리에 있는 포크와 오른쪽 하단 모서리에 있는 닫기 버튼을 클릭하면 해당 메서드는 close_bg이며, 이는 이 모달 대화 상자를 닫는 것, 즉 숨기는 것을 의미합니다. 버튼을 클릭하면 모달 대화 상자가 열립니다(표시). 제출된 값을 저장하기 위해 왼쪽에 p 태그를 만듭니다.

1. 버튼을 클릭하여 모달 상자를 열고 입력 상자의 값은 외부의 p 태그의 innerHTML입니다.

2. 십자 표시를 클릭하거나 닫기를 클릭하여 먼저 입력 상자의 내용을 지운 다음 모달 대화 상자를 닫고 숨깁니다.

3. 제출을 클릭하고 외부 p 태그의 innerHTML에 입력 상자의 값을 할당한 다음 모달 대화 상자를 숨깁니다.

이것은 프런트 엔드의 상호 작용일 뿐이며 백 엔드에 대한 인터페이스를 호출하지 않습니다. 직장에서 우리의 생각은 다음과 같습니다.

1. 편집 버튼을 클릭하면 모달 대화 상자가 팝업되고 입력 상자의 값이 백엔드 인터페이스에 호출되어 표시됩니다.

2. 십자 표시를 클릭하거나 닫기를 클릭하여 먼저 입력 상자의 내용을 지운 다음 모달 대화 상자를 닫고 숨깁니다.

3. 제출을 클릭하여 인터페이스를 호출하고 post 메소드를 사용하여 상자의 데이터를 백엔드 인터페이스 형식으로 전달하여 데이터베이스의 값을 수정하고 마지막으로 입력 상자를 닫고 숨깁니다.

별로 할 말이 없지만 먼저 인터페이스를 호출하지 않는 코드를 작성하겠습니다.인터페이스를 호출하는 코드를 작성할 수 있어야 합니다.

<script>
    $("#btn1").click(function () {
        //显示模态框
        $("#myModal").modal('show')
        //输入框的值为p的html
        $("#inp").val($("#word").html())
    })
    function close_bg() {
        //点击关闭，就要清空输入框内容
        $("#inp").val('')
        //关闭模态框
        $("#myModal").modal('hide')
    }

    function submit() {
        //得到输入框的值，赋值出来
        $("#word").html($("#inp").val())
        //关闭模态框
        $("#myModal").modal('hide')
    }
</script>

자, 오늘의 콘텐츠는 여기까지입니다. 사용해 봅시다. 다음에 보자

jQuery와 결합된 부트스트랩을 사용하여 간단한 모달 대화 상자 구현

추천