Show another page in Bootstrap 5 modal with iframe and dynamic querystring

Question

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 the query string for an id and show all info.

How can I 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>

Answer 1

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');
});