Question

我的应用程序具有ui-bootstrap模式，带有一些输入和按钮。它在桌面上完美运行，但在较窄的屏幕上，模式在释放鼠标按钮后失去焦点（光标从输入框中消失），因此在那里输入任何内容都非常困难。

提示：按下鼠标按钮时可以正常工作。我可以进入测试:)。

模态代码：

<div ng-controller="LoginModalCtrl as $ctrl" class="modal-login">

    <script type="text/ng-template" id="loginModalContent.html">
        <div id="ModalLog" tabindex="-1" role="dialog" aria-labelledby="Zaloguj się">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" aria-label="Close" ng-click="$ctrl.cancel();"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title" id="myModalLabel">Zaloguj się do accTrader.com</h2>
                </div>
                <div class="modal-body">
                    <form method="post" name="submit_reg">
                        <label for="login">Login:</label>
                        <input type="text" placeholder="login" ng-model="$ctrl.loginData.login" name="login" title="Wpisz swój login, użyj 6 do 20 znaków!" required />

                        <label for="password">Hasło:</label>
                        <input type="password" placeholder="hasło" ng-model="$ctrl.loginData.password" name="password" title="Wpisz swój login, użyj 8 do 20 znaków!" required />

                        <a href="forget.php" title="zapomniałem hasła"> Zapomniałem hasła :( </a>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" ng-click="$ctrl.cancel()">Zamknij</button>
                    <button type="button" class="btn btn-primary btn-md" ng-click="$ctrl.login()">Zaloguj się</button>
                </div>
            </div>
        </div>
    </script>

    <A ng-click="$ctrl.open()">Zaloguj</A>
</div>

的index.html：

<!-- angular modules -->
<script src="scripts/angular/angular.min.js"></script>
<script src="scripts/angular/angular-route.min.js"></script>
<script src="scripts/angular/ui-bootstrap.min.js"></script>
<script src="scripts/angular/angular-animate.min.js"></script>
<script src="scripts/angular/angular-touch.min.js"></script>
<script src="scripts/angular/angular-local-storage.min.js"></script>

更新1：我将ngTouch添加到应用程序模块，但仍然存在同样的问题：

var app = angular.module('XXXX', [
    'ngRoute', 'ui.bootstrap', 'LocalStorageModule', 'duScroll', 'ngTouch'
]).

更新2：在实施UPDATE1后，它的效果更好：它在FF＆amp; IE11中运行稳定，但有时在Chrome中失败。

模态正在失去对具有较窄显示的设备的关注

0 个答案: