google re captcha没有显示出来

Question

我在模态弹出窗口中实现了google re captcha。我还包括了api，即recaptcha / api.js来启用recpatcha。但是当我调用弹出窗口时它没有显示出来。

当我右键点击弹出窗口并检查时，可以在元素部分中看到包含google recaptcha的div标记。

我在页脚页面中包含了模态弹出窗口，该页面由我网站的每个页面调用。

我的代码：

<script src="https://www.google.com/recaptcha/api.js"></script>
<!--  Request A Demo POPUP(Start) -->
<div class="modal fade" id="myModal" role="dialog">  
    <div class="modal-dialog">    
      <!-- Modal content-->      
      <?php echo form_open(base_url( 'employer-request-demo/request-demo/submit' ), array( 'id' => 'idfrmdemo', 'name' =>'frmdemo', 'method'=>'post'));?>
      <!--  input type="text" name="<?php //echo $this->security->get_csrf_token_name();?>" value="<?php //echo $this->security->get_csrf_hash();?>"-->
      <div class="modal-content">        
         <div class="modal-header" align="center">
          <button type="button" id="frmdemo-close" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"><strong>Request a Demo</strong></h4>
        </div>
        <div class="modal-body" id="idmodalcontent">                         
             <div class="row">
             <div class="form-group col-md-6">
             <label for="txtfirstname">FIRST NAME</label>
             <input name="txtfirstname" type="text" class="form-control required" placeholder="Please enter your first name" id="idfirstname" >
             </div>
             <div class="form-group col-md-6">
             <label for="txtlastname">LAST NAME</label>
             <input name="txtlastname" type="text" class="form-control required" placeholder="Please enter your last name" id="idlastname">            
             </div>
             </div>
             <div class="form-group">
             <label for="Email">CORPORATE EMAIL</label>
             <input type="email" name="txtemail" class="form-control" placeholder="Please enter your email id" id="idemail">
             <div class="divstyle"></div>
             </div>
             <div class="form-group">
             <label for="idcompany">COMPANY NAME</label>
             <input type="text" name="txtcompany" placeholder="Please enter the name of your company" class="form-control" id="idcompany" >
             </div>             
             <div class="form-group">
             <label for="Phone">PHONE</label>
             <input type="tel" name="txtphone" placeholder="Please enter your phone number" class="form-control" id="idphone">             
             </div>
            <div class="form-group">
             <label for="">MODE OF CONTACT</label>
             <select name="selmode" id="idmode" class="form-control">
              <option value="" disabled selected>Select mode of contact</option>
              <option value="email">Email</option>
              <option value="phone">Phone</option>
              <option value="any">Any</option>                  
            </select>
            </div>
            <div class="form-group">
            <div class="g-recaptcha" data-sitekey="6LexRREUAAAAAELhZaiO5FxRbgnyWEwIxFTWeHhE"></div>
            <input type="hidden" class="hiddenRecaptcha required" name="cphiddenRecaptcha" id="idcphiddenRecaptcha">
            </div>             
         </div>
        <div class="modal-footer">
        <div id="btn-smb">
          <input type="submit" id="idsubmit" name="submit" value="Submit" class="btn btn-warning" />
          </div>
          <div id="btn-close" style="display:none;">
          <input type="button" name="close" value="Close" class="btn btn-warning"  id="idclose"/>
          </div>
        </div>
      </div>
       <input type="hidden" name="context" id="frm_context" value="Request A Demo" />
      <?php echo form_close();?> 
    </div>
  </div>
<!--  Request A Demo POPUP(End) -->

我在控制台中收到以下错误：

  

XMLHttpRequest无法加载javascript：void（0）;。交叉源请求仅支持协议方案：http，数据，chrome，chrome-extension，https，chrome-extension-resource。