如何在引导模式弹出窗口中打开 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>

出现在 div 中的所有内容都显示在模态弹出窗口中，所以我的问题是有没有办法在模态弹出窗口中显示我已经创建的 aspx 网络表单，而不必将所有 html 和代码隐藏复制到这个 div 中？

我听说过一些关于 window.open 的事情，但我认为不是这样，提前谢谢你。

Answer 1

也许这段代码可以帮助你： 添加jquery和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>

Answer 2

您可以在模态正文中添加iframe，并在其中加载页面的网址。

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