Question

我有这个链接

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

我有这个代码打开一个bootstrap模式弹出窗口。

            <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 webform，而不必将所有的html和codebehind复制到这个div？ / p>

我听说过有关window.open的事情，但我认为事实并非如此，请提前谢谢。

2 个答案:

答案 0 :(得分：4)

答案 1 :(得分：0)

Answer 1

您可以在模态正文中添加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。

Answer 2

也许这段代码可以帮助您：添加jQuery和引导程序

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

如何在bootstrap模式弹出窗口中打开aspx页面

2 个答案: