How to open aspx page inside bootstrap modal popup

Question

I have this link

<a href='' data-toggle='modal' data-target='#modalC'>Book Now</a>

And i have this code which opens a bootstrap modal popup.

            <div class="modal fade" id="modalC" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Cantidad reservas mensuales</h4>
      </div>
      <div class="modal-body" id="content">

      </div>
  </div>
  </div>
  </div>

Everything appearing inside div with id content is what appears inside modal popup, so my question is is there a way to show my already created aspx webform inside the modal popup without having to copy all the html and codebehind to this div?

I've heard something about window.open but i think it is not the case, Thank you in advance.

Solution 1

You can add an iframe into the modal body and load the url of your page inside it.

<div class="modal fade" id="modalC" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Cantidad reservas mensuales</h4>
            </div>
            <div class="modal-body" id="content">
                <iframe src="your new page url">
            </div>
        </div>
    </div>
</div>

if you want to load the page everytime you open the modal, you can add the iframe src when you click on the button you use to open the modal (or whichever method you use to open it).

Solution 2

Maybe this code can help you: Add jquery and bootstrap

$(document).ready(function () {
            initializeEvents();
        });

var initializeEvents = function () {
        $("#btnCarga").click(function () {
           //agregas el aspx que quieres mostrar, el titulo y el pie de página pueden ser opcionales
            ShowModalIframe('OtherPage.aspx', 'Tittle', 'Footer');
        });
    };
//Crea un modal con un iframe en el contenido donde se mostrará el aspx
var ShowModalIframe = function (uriContent, tittle = 'Titulo', footer='Carga completada') {

        var html = '<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">\
                    <div class="modal-dialog modal-xl">\
                        <div class="modal-content">\
                            <div class="modal-header">\
                                <h5 class="modal-title">'+tittle+'</h5>\
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">\
                                  <span aria-hidden="true">&times;</span>\
                                </button>\
                              </div>\
                            <div id="modal-body" class="modal-body">\
                                <div class="embed-responsive embed-responsive-21by9">\
                                  <iframe id="iframe-modal" class="embed-responsive-item" src="'+document.location.origin+'/'+uriContent+'"></iframe>\
                                </div>\
                            </div>\
                            <div class="modal-footer">\
                                '+footer+'\
                            </div>\
                        </div>\
                    </div>\
                </div>';

        var dialog = $(html);
        dialog.modal({
            backdrop: 'static',
            keyboard: false
        });
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<button id="btnCarga" type="button" class="btn btn-primary" >
  Mostrar modal
</button>

Comments

[user3816931]

unfurtanely, it does not work for some reason , the bootstrap calendar stops working and so does the modal popup.

[David Zhou]

My mistake, the modal-body should be inside modal-content. Tell me if it works.