AngularJS UI- Bootstrap Модальное диалоговое окно покрыто main. html - PullRequest
Новая
       15

AngularJS UI- Bootstrap Модальное диалоговое окно покрыто main. html

0 голосов
/ 08 февраля 2020

enter image description here

Как я могу использовать bootstrap модальные диалоги с AngularJS, используя ui- bootstrap с angular -ui-router? Я новичок в AngularJS и безуспешно пытался найти документацию.

Я использовал этот код, но его содержание покрывается: мой основной. html: 

<form class="navbar-form">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search...">
        <span class="input-group-btn">
        <button type="submit" class="btn btn-default">
            <img src="img/dsd.png" style="width: 17px">
        </button>
    </span>
    </div>
    <a class="btn btn-success" ui-sref="app.login">Login</a>
    <a class="btn btn-danger" ui-sref="app.register">Regiter</a>
</form>

мое приложение. js: 

angular.module("myApp",["ngAnimate","ngSanitize","ui.router","ui.bootstrap","mds"])

.config(function ($stateProvider,$urlRouterProvider) {
    $stateProvider
    .state("app",{
        url:"/app",
        views:{
            main:{
                templateUrl:"templates/main.html",
                controller:"appCtrl"
            }
        }
    })

    .state("app.register",{
        url:"/register",
        views:{
            sub:{
                templateUrl:"templates/register.html",
                controller:"registerCtrl"
            }
        }
    })

мой модал: 

<div id="y" class="modal-dialog">
    <div>
        <div class="modal-content">
            <div class="modal-header btn-danger">
                <a href="#" class="close" data-dismiss="modal" style="color: black;font-size: 20px;font-weight: bold">x</a>
                SignUp
            </div>
            <div class="modal-body">
                <form ng-submit="register()">
                    <div class="form-group">
                        <label>Full Name</label>
                        <input type="text" class="form-control" ng-model="Name" required>
                    </div>
                    <div class="form-group">
                        <label>User Name</label>
                        <input type="text" class="form-control" ng-model="UserName" required>
                    </div>
                    <div class="form-group">
                        <label>Phone Number</label>
                        <input type="tel" class="form-control" ng-model="Phone" required>
                    </div>
                    <div class="form-group">
                        <label>Full Address</label>
                        <textarea class="form-control" ng-model="addr" required></textarea>
                    </div>
                    <div class="form-group">
                        <label>Email address:</label>
                        <input type="email" class="form-control" ng-model="Email" required>
                    </div>
                    <div class="form-group">
                        <label>Password:</label>
                        <input type="password" class="form-control" ng-model="Pwd" required>
                    </div>
                    <div class="checkbox">
                        <label><input type="checkbox"> Remember me</label>
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
            </div>
            <div class="modal-footer">
                Sudan Store.
            </div>
        </div>
    </div>
</div>

1 Ответ

0 голосов
/ 08 февраля 2020

Один из подходов заключается в использовании опции appendTo:

Из документов:

$uibModal функция открытия

параметр option

  • appendTo (Type: angular.element, Default: body: Example: $document.find('aside').eq(0)) - добавляет модальное значение к указанному c элементу.

Используйте параметр appendTo, чтобы добавить элемент, который будет полностью видимым .

Для получения дополнительной информации см.

...