modal interfere with google reCAPTCHA window to click the image

[amostsai]

Short description of the problem:

modal interfere with google reCAPTCHA window to click the image

What behavior are you expecting?

can click the image in reCAPTCHA and return modal to click submit a register form.

Steps to reproduce:

1. click register button and show ionic modal
2. click google reCAPTCHA (i'm not a robot) and show reCAPTCHA window
3. (reCAPTCHA window is above ionic modal)
4. when i want to click the image in reCAPTCHA window, In fact i click the modal input field

<ion-modal-view>
    <div class="tabs-striped tabs-background-assertive tabs-color-light">
        <div id="account" class="tabs">
            <a class="tab-item" ng-class="{active : viewLogin}" href="javascript:" ng-click="switchTab('login')">登入</a>
            <a class="tab-item" ng-class="{active : !viewLogin}" href="javascript:" ng-click="switchTab('register')">註冊</a>
        </div>
    </div>

    <!-- login pane -->
    <ion-pane ng-show="viewLogin">
        <ion-header-bar>
            <h1 class="title">會員登入</h1>
            <div class="buttons">
                <button class="button button-assertive" ng-click="hide()">關閉</button>
            </div>
        </ion-header-bar>
        <ion-content>
            <form>
                <div class="list">
                    <label class="item item-input">
                        <span class="input-label">信箱</span>
                        <input type="email" ng-model="user.email">
                    </label>
                    <label class="item item-input">
                        <span class="input-label">密碼</span>
                        <input type="password" ng-model="user.password">
                    </label>
                    <label class="item">
                        <button class="button button-block button-assertive" ng-click="login()" ng-disabled="!user.email || !user.password" type="submit">登入</button>
                    </label>
                    <button class="button button-full button-assertive" ng-click="googleLogin()">Google 登入</button>
                    <button class="button button-full button-positive" ng-click="facebookLogin()">Facebook 登入</button>
                </div>
            </form>
        </ion-content>
    </ion-pane>

    <!-- register pane -->
    <ion-pane ng-hide="viewLogin">
        <ion-header-bar>
            <h1 class="title">會員註冊</h1>
            <div class="buttons">
                <button class="button button-assertive" ng-click="hide()">關閉</button>
            </div>
        </ion-header-bar>
        <ion-content>
            <form>
                <div class="list">
                    <label class="item item-input">
                        <span class="input-label">信箱</span>
                        <input type="text" ng-model="user.email">
                    </label>
                    <label class="item item-input">
                        <span class="input-label">姓名</span>
                        <input type="text" ng-model="user.username">
                    </label>
                    <label class="item item-input">
                        <span class="input-label">密碼</span>
                        <input type="password" ng-model="user.password">
                    </label>
                    <label class="item item-input">
                        <span class="input-label">再次輸入密碼</span>
                        <input type="password" ng-model="user.password_confirm">
                    </label>

                    <div vc-recaptcha key="'xxxxxxxxxxxxxxxxxxxxxxxxxxxx'" class="ng-isolate-scope"></div>

                    <label class="item">
                        <button class="button button-block button-assertive" ng-click="register()" ng-disabled="!user.username || !user.email || !user.password || !user.password_confirm" type="submit" type="submit">註冊</button>
                    </label>

                </div>
            </form>
        </ion-content>
    </ion-pane>
</ion-modal-view>

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

same question: http://techqa.info/programming/question/41888017/google-recaptcha-inside-ionic-modal-in-new-modal-template

Which Ionic Version? 1.x or 2.x use ionic 1.x script in ionic 2.1.14 environment

Plunker that shows an example of your issue

Run ionic info from terminal/cmd prompt: (paste output below) Cordova CLI: 6.5.0 Ionic CLI Version: 2.1.14 Ionic App Lib Version: 2.1.7 ios-deploy version: Not installed ios-sim version: Not installed OS: Linux 4.4 Node Version: v6.9.1 Xcode version: Not installed