Google apps script 在GoogleApps脚本中使用引导模式

我试图有一个表单，允许用户检查我们数据库中的状态，在提交时我想写入我们的数据库，然后返回一个引导css模式，其中包含查询数据库中另一个表的信息。除了模态之外，所有的工作都很好，它只加载div而不创建弹出面板。我假设我没有加载它需要的依赖项库，但仍然在学习，所以我想我会看到关于我的代码和任何潜在解决方案的反馈

我的代码是：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">


<style>
  form { margin:0 auto; }
  input { display:block; }
</style>
<div class="container-fluid">
<form id="LiRoForm">
<div class="page-header">
I have a an image header here
</div>

    <div class="form-group">
    <label>Name:</label>
    <input type="text" class="form-control" id="name" name="name" placeholder="Enter your name..">
    </div>

    <div class="form-group">
    <label>Email:</label>
    <input type="email" class="form-control validate[required,custom[email]]" id="email" name="email" placeholder="Enter your email..">
    </div>

    <div class="form-group">
    <label>Application ID:</label>
    <input type="text" class="form-control" id="appID" name="appID" placeholder="Please enter the full application ID">
    </div>

    <input type="submit" class="btn-primary btn-lg" id="submit-button" value="Check Status" 
           onclick="submitForm(); return false;">
           </form>
</div>

<div id="dialog" title="Modal Title" class="modal fade" role="dialog" aria-labelledby="dialog" aria-hidden="true"></div>


<script>    
    function submitForm() {
        var form = $('#LiRoForm')[0];
checkForm(function(){
            $("#submit-button")[0].value = 'Checking Status...';


            google.script.run
            .withSuccessHandler(function onSuccess(data) {
                    var data = JSON.parse(data);
                    if (data == '') {
                        $("#dialog").html("<div>Our records indicate you have no data in the system</div>");


                    }
                    else {
                        $("#dialog").html("<div>Our system indicates you have the following data:</div>");
                        for(var x in data) {
                            $("#dialog").append("<div>"+data[x].FileType+"</div>");
                        }

                    }
                $("#submit-button")[0].value = 'Check Status';
                $("#dialog").modal('show');


            })
            .withFailureHandler(function(error) {
                alert(error);
            })
            .checkStatus(form);

            });



    }

    function checkForm(callback) {
        var name = $('#name').val();
        var email = $('#email').val();
        var appID = $('#appID').val();
        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

        if (name == '' || email == '' || appID == '' || fileType == '') {
            alert("Please fill in all fields");
            return;
        }
        else if (file == '') {
             alert("Please select a file");
             return;
        }
        else if (emailPattern.test(email) == false) {
            alert("Please enter a valid email address");
            return;
        }

        // Validate AppID
        google.script.run
        .withSuccessHandler(callback)
        .withFailureHandler(function(error) {
            alert(error);
        })
        .checkID(appID);
    } 
</script>

---

感谢@Mogsdad将html模式从本机切换到IFRAME是解决方案，同时匹配样式css和引导脚本：

不工作：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

工作

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

---

请澄清。该代码不足以重现您的问题，它缺少所有的GS，尤其是您如何加载和显示HTML。。。什么是沙箱模型、检查ID和检查状态。如果你想得到比猜测更好的答案，最好是把它减少到证明你所描述的失败所需的最低限度。您是否打算让IFRAME沙盒从跨域脚本生成弹出窗口？如果是这样，你的问题可能是谷歌的安全模型。我会从successHandler开始调试。你正在取回数据吗？新的HTML是否被注入到DIV中？你怎么知道的？您是否正在浏览浏览器开发工具中的代码行？是的，新数据正在注入DIV，checkID和check status功能继续工作。我在这里有一个精简版本，以便可以看到：更新：我将沙盒模式切换到IFRAME，弹出窗口可以正常工作，但有一个小故障。弹出窗口不会出现在灰色背景的顶部。这里可以看到示例：GS:function doGete{return HtmlService.createHtmlOutputFromFile'page.html'.setSandboxModeHtmlService.SandboxMode.IFRAME；}