> 백엔드 개발 > PHP 튜토리얼 > $_GET 변수를 부트스트랩 모달에 전달하는 방법은 무엇입니까?

$_GET 변수를 부트스트랩 모달에 전달하는 방법은 무엇입니까?

Patricia Arquette
풀어 주다: 2024-11-11 22:32:02
원래의
891명이 탐색했습니다.

How to Pass $_GET Variables to a Bootstrap Modal?

링크에서 $_GET 변수를 Bootstrap 모달로 전달하는 방법

링크에서 $_GET 변수를 Bootstrap 모달로 전달하는 것이 필수적입니다. 모달 내의 특정 데이터를 수정하고 표시합니다. 이를 달성하기 위한 몇 가지 솔루션은 다음과 같습니다.

간단한 솔루션

  • 모달 통화 버튼:

    <td data-placement="top" data-toggle="tooltip" title="Show">
    <a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" href="file.php?id=<;?php echo $obj->id; ?>"">
      <span class="glyphicon glyphicon-pencil"></span>
    </a>
    </td>
    로그인 후 복사
  • 모달 HTML:

    <div class="modal fade">
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사
  • file.php

    $Id = $_GET["id"]; // Escape the string if needed
    // Run query to fetch records against $Id
    // Show records in modal body
    로그인 후 복사

대체 솔루션 Ajax 및 Bootstrap 모달 이벤트 청취자

  • 모달 통화 버튼:

    <td data-placement="top" data-toggle="tooltip" title="Show">
    <a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" data-id="<php echo $obj->id; ?>">
      <span class="glyphicon glyphicon-pencil"></span>
    </a>
    </td>
    로그인 후 복사
  • 모달 HTML:

    <div class="modal fade">
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사
  • 스크립트:

    $( document ).ready(function() {
    $('#myModal').on('show.bs.modal', function (e) {
      var id = $(e.relatedTarget).data('id');
      $.ajax({
        type : 'post',
        url : 'file.php', // Fetches records
        data : 'post_id='+ id,
        success : function(data) {
          $('.form-data').html(data); // Shows fetched data in modal body
        }
      });
    });
    });
    로그인 후 복사
  • file.php

    if ($_POST['id']) {
    $id = $_POST['id'];
    // Run query to fetch records
    // Echo the data to be displayed in the modal
    }
    로그인 후 복사
    로그인 후 복사

대체 Ajax 및 jQuery 클릭 기능을 사용한 솔루션

  • 모달 호출 버튼:

    <td data-placement="top" data-toggle="tooltip" title="Show">
    <a class="btn btn-primary btn-xs open-modal" href="">
    로그인 후 복사
  • 모달 HTML:

    <div class="modal fade">
    로그인 후 복사
    로그인 후 복사
    로그인 후 복사
  • 스크립트:

    $( document ).ready(function() {
    $('.open-modal').click(function(){
      var id = $(this).attr('id');
      $.ajax({
        type : 'post',
        url : 'file.php', // Fetches records
        data : 'post_id='+ id,
        success : function(data) {
          $('#editBox').show('show');
          $('.form-data').html(data);
        }
      });
    });
    });
    로그인 후 복사
  • file.php

    if ($_POST['id']) {
    $id = $_POST['id'];
    // Run query to fetch records
    // Echo the data to be displayed in the modal
    }
    로그인 후 복사
    로그인 후 복사

통과 모달에 대한 페이지 정보

  • 모달 호출 버튼:

    <td data-placement="top" data-toggle="tooltip" title="Show">
    <a data-book-id="<php echo $obj->id; ?>" data-name="<php echo $obj->name; ?>" data-email="<php echo $obj->email; ?>" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox">
      <span class="glyphicon glyphicon-pencil"></span>
    </a>
    </td>
    로그인 후 복사
  • 모달 이벤트:

    $(document).ready(function(){
    $('#editBox').on('show.bs.modal', function (e) {
      var bookid = $(e.relatedTarget).data('book-id');
      var name = $(e.relatedTarget).data('name');
      var email = $(e.relatedTarget).data('email');
      // Can pass as many on-page values to modal
    });
    });
    로그인 후 복사

이러한 솔루션 중 하나를 구현하면 $_GET 변수를 링크에서 Bootstrap 모달로 효과적으로 전달할 수 있으므로 데이터를 동적으로 로드하고 조작할 수 있습니다. 모달 창 내에서.

위 내용은 $_GET 변수를 부트스트랩 모달에 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿