在 Google Apps 脚本中使用 Bootstrap Modals

Question

我正在尝试创建一个表单，允许用户检查我们数据库中的状态，并在提交时我想写入我们的数据库，然后返回一个引导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>

Answer 1

感谢@Mogsdad 将 html 模式从 NATIVE 切换到 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>