bootstrap 模态对话框中嵌入的 Microsoft 表单无法正常工作

Question

我正在尝试在模式对话框中嵌入 Microsoft Forms 调查。当用户单击一个按钮时，我想要一个加载 Microsoft Forms 调查的对话框。当使用下面的代码而不是实际的调查时，Microsoft Forms 只显示 link。当我在一个简单的 html 文件中使用相同的嵌入代码时，调查会按预期加载，而不仅仅是 link。知道问题出在哪里吗？

注意：下面的代码写在MVC视图cshtml文件中。

<div class="modal fade" id="FormsModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document" style="width:700px;>
    <div class="modal-content">
        <div class="modal-body mb-0 p-0">
            <iframe width="640px" height="480px" src="https://forms.office.com/Pages/ResponsePage.aspx?id=DQSIkWdsW0yxEjajBLZtrQAAAAAAAAAAAAMAAIYo0WdUNlhENkVDNktKV0RXVk1FRFJGWVhZUlZYQi4u&embed=true" frameborder="0" marginwidth="0" marginheight="0" style="border: none; max-width:100%; max-height:100vh" allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen> </iframe>
        </div>
    </div>
</div>

Answer 1

这是我所做的，我在下面添加了输出

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#FormsModal">
  Launch demo modal
</button>
    <div class="modal fade" id="FormsModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document" style="width:700px;">
    <div class="modal-content">
        <div class="modal-body mb-0 p-0">
            <iframe width="640px" height="480px" src="https://forms.office.com/Pages/ResponsePage.aspx?id=DQSIkWdsW0yxEjajBLZtrQAAAAAAAAAAAAMAAIYo0WdUNlhENkVDNktKV0RXVk1FRFJGWVhZUlZYQi4u&embed=true" frameborder="0" marginwidth="0" marginheight="0" style="border: none; max-width:100%; max-height:100vh" allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen> </iframe>
        </div>
    </div>
</div>

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>

Answer 2

出现此问题是因为表单隐私设置。如果将表单设置为所有人都可以访问，则它可以正常加载。如果表单设置为“仅限组织内部人员”，则加载表单 link 的占位符图像。这是因为组织内部的人应该已经 signed-in 来回答表格。否则表单会跳转到微软账号登录页面，只有登录成功后才会出现表单。

bootstrap 模态对话框中嵌入的 Microsoft 表单无法正常工作

Microsoft forms embed in bootstrap modal dialog not working

modal-dialog

bootstrap-modal

embed

microsoft-forms