如何在引导程序模式弹出窗口中打开aspx页面

Question

我有此链接

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

而且我有这段代码可以打开引导模式弹出窗口。

            <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>

具有id内容的div内出现的所有内容都是模式弹出窗口内出现的内容，所以我的问题是有没有办法在模式弹出窗口内显示我已经创建的aspx webform，而不必将所有html和代码隐藏都复制到该div？

我听说过关于window.open的一些信息，但我认为并非如此，谢谢。

Answer 1

您可以在模态主体中添加iframe并在其中加载页面的URL。

<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>

如果您想在每次打开模态时都加载页面，则可以在单击用于打开模态的按钮（或用于打开模态的任何方法）时添加iframe src。

Answer 2

也许此代码可以帮助您：

$(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>