부트 스트랩 모달 박스를 구현하는 방법 테이블 행 데이터 및 채우기 양식을 동적으로 얻습니다.

이 튜토리얼은 Bootstrap의 데이터-* 속성 및 JavaScript 이벤트를 사용하여 HTML 테이블에서 버튼을 클릭 할 때 해당 행 데이터 (예 : 이메일 주소)를 동적으로 전달하고 모달 상자의 양식 필드를 자동으로 채우는 방법을 자세히 설명합니다. 이 접근법은 루프에서 모달 상자를 반복적으로 정의하지 않고 코드 효율성과 유지 관리를 향상 시키며 모달 박스가 항상 올바른 데이터를 표시 할 수 있도록합니다.

웹 애플리케이션 개발, 특히 테이블 데이터를 표시 할 때 테이블의 각 행에 작동 버튼을 제공해야하며 편집, 답장 및 기타 작업을 클릭하기 위해 클릭 한 후 모달 박스 (MODAL)가 팝업됩니다. 일반적인 문제는 어떤 버튼 행을 클릭하든 모달 박스의 양식 필드는 항상 (일반적으로 첫 번째 행) 데이터를 표시한다는 것입니다. 이는 모달 박스의 HTML 구조가 루프에 반복적으로 정의되거나 동적 데이터가 모달 박스의 양식 요소로 올바르게 전달되지 않기 때문입니다.

이 튜토리얼은 효율적이고 권장되는 솔루션을 제공합니다. 모달 상자를 단일 인스턴스로 정의하고 Bootstrap의 JavaScript 이벤트 및 HTML5의 데이터-* 속성을 사용하여 모달 박스의 데이터를 동적으로 채우십시오.

핵심 원칙

동적 데이터 전송 실현의 핵심은 다음 두 가지 점에 있습니다.

1. * `데이터 속성 : ** 모달 상자를 트리거하는 버튼 (또는 기타 요소)에서 데이터 B를 사용하여 (또는 기타 사용자 정의 데이터-* 속성) 사용하여 전달 해야하는 동적 데이터를 저장하십시오.
2. 부트 스트랩 모달 박스 이벤트 : Bootstrap Modal Box의 모달 이벤트를 듣습니다. 이 이벤트는 모달 박스가 표시 되려고 할 때 트리거되며, 이벤트 상자를 트리거하는 버튼 요소는 이벤트를 통해 얻을 수 있습니다. 그런 다음 버튼의 데이터* 속성에서 필요한 데이터를 추출하여 모달 박스 내부의 양식 필드로 채울 수 있습니다.

구현 단계

1. HTML 테이블 구조 및 동적 데이터 전송

먼저 PHP 루프에 테이블 행을 구축하고 각 "답장"버튼에 해당 이메일 주소를 포함시켜야합니다. 여기서는 Bootstrap의 Data-BS-Target 및 Data-BS-Toggle 속성을 사용하여 트리거 할 모달 상자를 지정하고 데이터 BS---- 속성을 사용하여 현재 행의 이메일 주소를 전달합니다.

php // $ conn이 확립 된 데이터베이스 연결 $ sql = "선택 ID, 이름, 이메일, 주제, 메시지, 연락 시간을 선택하십시오."; $ records = mysqli_query ($ conn, $ sql); while ($ data = mysqli_fetch_array ($ records)) { ?> php } ?> 테이블>

참고 : 동적 데이터를 출력 할 때 HTMLSpecialchars () 기능을 사용하여 탈출 (XSS) 공격을 방지합니다.

2. 부트 스트랩 모달 상자의 정의

모달 박스의 HTML 구조는 한 번만 정의해야하며 PHP 루프 외부에 있습니다. 모달 박스에는 수신자의 사서함을 표시하기위한 입력 상자와 같은 동적 데이터를 수신하기위한 양식 필드가 포함되어 있습니다.

 <div class="modal fade" id="examplemodal" tabindex="-1" aria-labelledby="emailplemodallabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="Modal-Header">
                <h5 class="modal-title" id="examplemodallabel"> New News </h5>
                 
            </div>
            <div class="modal-body">
                <form method="post" robile="form" enctype="multipart/form-data" action="">
                    <div class="row">
                        
                        <div class="col-md-12 mb-3">
                            <label for="수신자-메일"> 수신자 : </label>
                            
                        </div>

                        <div class="col-md-12 mb-3">
                            <label for="email-subject" class="col-form-label"> 이메일 제목 : </label>
                            
                        </div>

                        <div class="MB-3">
                            <label for="message-text" class="col-form-label"> 메시지 내용 : </label>
                            <textrea class="form-control" rows="8" name="message" id="message-text"> </textrea>
                        </div>

                        <div class="col-md-12 mb-3">
                            <label for="attachment" class="col-form-label"> 첨부 파일 </label>
                            <input type="file" class="form-control" name="file []" multure="multure" id="첨부 파일">
                        </div>
                    </div>
                    <button name="제출" type="제출" btn-primary> 이메일 보내기 </button>
                </form>
            </div>
        </div>
    </div>
</div>

알아채다:

• 모달 박스의 ID (examplemodal)는 트리거 버튼의 데이터 bs- 표적 값과 일치해야합니다.
• JavaScript 작업을 용이하게하기 위해 수신자의 사서함에 ID (수신자-메일)를 추가하십시오.
• 수신자의 사서함 입력 상자를 Readonly로 설정하십시오. 일반적으로 사전 가득한 사서함은 사용자가 마음대로 수정하기를 원하지 않습니다.

3. JavaScript Data Filling Logic

이것은 동적 데이터 충전을 구현하는 핵심 단계입니다. 모달 박스의 모달 이벤트를 들으려면 JavaScript 코드를 작성해야합니다. 이벤트가 트리거되면 트리거 버튼의 Data-B-whon 속성 값을 가져 와서 모달 박스의 해당 입력 필드로 설정하십시오.

 // 모달 상자 가져 오기 돔 요소 var emaveModal = document.getElementById ( 'emablemeDal');

// 모달 박스의 모달 이벤트를 듣습니다.
    // MODAL BOX var button = event.RelatedTarget을 트리거하는 버튼을 가져옵니다. //`exeralTarget`은 Modal Box를 트리거하는 DOM 요소입니다. // data-bs에서 데이터를 추출하는 버튼 var var var var recepienteMail = button.getAttribute ( 'data-bs-whateet')에서 데이터를 추출합니다.

    // 모달 상자에서 제목 및 수신자 입력 상자를 가져옵니다. var modaltitle = examplemodal.querySelector ( '. modal-title');
    var recepientInput = exampleModal.querySelector ( '#수신자-메일'); // ID를 기반으로 수신자 입력 상자를 가져옵니다. // 모달 상자의 제목과 수신자 입력 상자 MODALTITLE.TEXTCONTENT = 'recode at value of input Box의 값을 업데이트하십시오.
    RecepientInPut.Value = ReceiteEmail;
});

이 JavaScript 코드를 HTML 파일의 태그, 일반적으로

#	name	이메일	테마	메시지	시간	작동
php echo htmlspecialchars ($ data [ 'id']); ?>	php echo htmlspecialchars ($ data [ 'name']); ?>	php echo htmlspecialchars ($ data [ 'email']); ?>	php echo htmlspecialchars ($ data [ 'subject']); ?>	php echo htmlspecialchars ($ data [ 'message']); ?>	php echo htmlspecialchars ($ data [ 'time']); ?>	"> 답장

위 내용은 부트 스트랩 모달 박스를 구현하는 방법 테이블 행 데이터 및 채우기 양식을 동적으로 얻습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!