show another page in bootstap 5 modal with iframe and dynamic querystring

August 1, 2023

i have a list of my news like below (for example this button is readmore):

<button data-bs-toggle="modal" data-id="1" data-bs-target="#exampleModal">Readmore</button>
<button data-bs-toggle="modal" data-id="2" data-bs-target="#exampleModal">Readmore</button>
<button data-bs-toggle="modal" data-id="3" data-bs-target="#exampleModal">Readmore</button>
<button data-bs-toggle="modal" data-id="4" data-bs-target="#exampleModal">Readmore</button>
<button data-bs-toggle="modal" data-id="5" data-bs-target="#exampleModal">Readmore</button>
<button data-bs-toggle="modal" data-id="6" data-bs-target="#exampleModal">Readmore</button>

i have a page QuickView.aspx and i created my design for show. in page load i check querystring id and show all info.

how i can show this page with selected button for readmore ?

for example i click on the button with data-id=3 and how i can pass id=3 to iframe tag like below?

data-id is my primary key on database for news.

my modal:

<div class="modal fade" id="exampleModal" 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">title news</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                  <iframe src="QuickView.aspx?id=3"></iframe>
              </div>
            </div>
          </div>
        </div>

>Solution :

You can do this with a bit of jQuery. First modify your buttons and give them a class.

<button type="button" class="ReadMoreButton" data-id="1">Readmore</button>

And then bind a click event to the buttons with class ReadMoreButton and use that to set the ID to the source of the iframe and open the modal programatically.

$('.ReadMoreButton').bind('click', function () {
    var $modal = $('#exampleModal');

    //find the iframe in the modal and set the source
    $modal.find('iframe').attr('src', 'QuickView.aspx?id=' + $(this).data('id'));

    //open the modal
    $modal.modal('show');
});