google recaptcha没有显示出来

Question

I have implemented google re captcha in a modal popup. I have also included the api ,i.e recaptcha/api.js to enable the recpatcha. But it is not showing up when I invoke the popup.

When I right click on the popup and inspect, the div tag which includes the google recaptcha is being seen in the elements section .

I have included the modal popup in my footer page which is called by every page in my website.

My code:

<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) -->

I am getting the following error in the console:

XMLHttpRequest cannot load javascript:void(0);. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.