标签: modal-dialog

我正在使用Angular bootstrap Modal来显示一个弹出窗口.单击textarea/browser back按钮外的退格键,我想取消弹出窗口并继续更改URL.默认行为是模态后面的页面发生变化,但模态仍然位于顶部.

在模态实例的控制器中,我添加了一个

$ scope.$ on('$ routeChangeStart',function(){...});

它工作正常,但每当再次调用控制器时我都会看到错误.再次调用$ modalInstance.dismiss(),但在库中,它会抛出异常.

这是带有代码和repro步骤的plunkr.观察浏览器控制台是否有错误.

http://plnkr.co/UKXa6uFvy0ODHylMj28s

我做错了什么,或者是modal.js中的错误？

编辑:我不认为我的控制器范围是正确的.为什么AddCtrl的$ scope.$ on('$ routeChangeStart'在我导航到MainCtrl时被调用？

我有一个模态形式(A),显示另一种模态形式(B).B显示数据集并允许用户与其进行交互.我的问题是,一个动作要求A再次成为聚焦形式,这样用户可以输入某些值而不关闭B.我已经尝试了A.BringToFront和A.SetFocus,它确实显示在前面,但输入焦点保留在B中当你点击不应该的地方时,A中的任何点击或类似物会导致窗口"叮".代码有点像

A.ShowModal; ...在A:B.ShowModal()的事件中; ...在B事件中:

someobject.someMethodThatRequiresAFocused;

我的猜测是,一些模糊和奇怪的API调用可以再次使A模态¿任何想法？

问候

我正在尝试(不成功)使用AngularModalService.从公认的简单教程中执行复制/粘贴作业会给我一个错误.

这是教程,供参考:http: //www.dwmkerr.com/the-only-angularjs-modal-service-youll-ever-need/

使用Javascript:

var app = angular.module('app', ['angularModalService']);

app.controller( 'Controller', function($scope,ModalService) {

    $scope.show = function() {
        ModalService.showModal({
            templateUrl: 'modal.html',
            controller: "ModalController"
        }).then(function(modal) {
            modal.element.modal(); // this is the problem
            modal.close.then(function(result) {
                $scope.message = "You said " + result;
            });
        });
    };
});

app.controller('ModalController', function( $scope, close ) {
    $scope.close = function(result) {
        close(result, 500);
    };
});

</script>

HTML(教程中的丑陋,但应该更简单)

<div class="container" style="min-width: 700px; max-width: 700px; margin: 50px auto;" data-ng-app="app" data-ng-controller="Controller">
    <h3>Angular Modal Service</h3>
    <a class="btn btn-default" href ng-click="show()">Show …

我有一个项目要添加模式。太好了，所以我读了起来，听起来好像要使用$ dialog。我已经有角度了，我有bootstrap和bootstrap-ui。

阅读2013年的一篇文章时，他们说：“嘿，去获取Angular-UI模块，这就是$ dialog所在的位置！”

好的，我去了angular-ui网站，除非我真的很愚蠢（也许我是），否则没有Angular-UI Module这样的东西。我也不能轻易找出那个站点上的哪个文件（因为有一个完整的文件束）包含神奇的$ dialog。

救命？！

其中包括：

<script src="lib/AngularJS/angular.js"></script>
<script src="lib/AngularJS/angular-route.js"></script>
<script src="lib/AngularJS/angular-sanitize.js"></script>
<script src="lib/jQuery/jquery-2.1.1.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="lib/bootstrap-ui/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="lib/lodash/lodash.min.js"></script>
<script src="lib/angular-file-upload/dist/angular-file-upload-all.js"></script>

var myApp = angular.module("myApp",
  ['ngRoute',
   'angularFileUpload',
   'ui.bootstrap.tpls',
   'ui.bootstrap.rating',
   'ui.bootstrap',
   'ngMap',
   'ngSanitize']
);

myApp.controller('myController',
  ['$scope','$rootScope', '$dialog',
  function ($scope, $rootScope, $dialog) {

如果我从控制器中删除$ dialog，一切都很好。一旦将其放入其中，就会收到未知的提供程序错误。

我试图使用Jasny作为一些Off-Canvas菜单组件.

当在画布外菜单上单击链接时,我也使用Twitter-Bootstrap打开模态窗口.

我的问题是,非画布菜单(在移动视图上)将引导模式推向右侧,因此,我无法看到模态窗口中的所有元素.

有没有办法在导航栏上单击/选择链接(或按钮)时隐藏Off-Canvas菜单？

一些HTML代码段:

<div class="navbar navbar-fixed-top navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navbar-offcanvas" data-canvas="body">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand pull-right" href="#">
            <img class="img-responsive" src="assets/img/logo.png" alt="Alternate Text for Image" >
        </a>
    </div>

    <div class="navbar-offcanvas offcanvas navmenu-fixed-left">
        <a class="navmenu-brand" href="#">My Application</a>
        <ul class="nav nav-justified">
            <li>
                <a href="#"><span class="fa fa-search fa-lg"></span></a>
            </li>
            <li><a href="#" data-toggle="modal" data-target="#modalSignup" data-backdrop="static" >Sign Up</a></li>
            <li><a href="#" data-toggle="modal" data-target="#modalLogin" data-backdrop="static">Sign In</a></li>
        </ul>
    </div>
</div>

和模态HTML:

<div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" …

当我使用ZURB Foundation框架显示模态时,我试图在我的表单中设置输入字段的焦点.如果在我找到解决方案有一段时间之前遇到问题,我真的很抱歉.

这就是我所拥有的:

<div id="myModal" class="reveal-modal" data-reveal>
   <form action="php_scripts/post_message.php" method="POST" name="modalForm" id="modalForm">
      <label for="curse">???? ?? ????:</label>
      <textarea type="text" name="curse" id="curse" placeholder="?????? ??? ?? ???? ????.." required="true"></textarea>
      <input type="submit" name="submit" class="button secondary tiny right" value="OK">
   </form>
   <a class="close-reveal-modal">&#215;</a>
</div>

每当我点击一个按钮时,这个模态弹出,我希望我的输入字段(textarea)在我这样做时成为焦点.我尝试添加autofocus属性,我也尝试使用javascript设置焦点时单击按钮或此div显示或加载(onshow和onload方法).似乎没有什么对我有用,所以任何帮助将不胜感激.

如何在每个会话中显示一次此对话框弹出窗口,我看到cookie配置但我无法将其应用于此案例:

$(document).ready(function() {
    ShowDialog(true);
    e.preventDefault();
});

$("#btnClose").click(function(e) {
    HideDialog();
    e.preventDefault();
});

function ShowDialog(modal) {
    $("#overlay").show();
    $("#dialog").fadeIn(300);

    if (modal) {
        $("#overlay").unbind("click");
    } else {
        $("#overlay").click(function(e) {
            HideDialog();
        });
    }
}

function HideDialog() {
    $("#overlay").hide();
    $("#dialog").fadeOut(300);
}

这是一个例子:CoverPop在我的代码的上下文中,我如何申请？

我想了解如何在Yii2中使用Modal窗口处理表单的基础知识？这是我目前的理解,如果有人能解释我错过了什么,我将不胜感激.所以,我有一个带有记录的ListView.每条记录都包含一个按钮.该按钮打开一个带有Form的Modal:

echo Html::a('<span class="glyphicon glyphicon-bell" aria-hidden="true"></span>', ['#'],[
                         'id' => $model->id,
                         'class' => 'linkbutton',
                         'data-toggle'=>'modal',
                         'data-tooltip'=>'true',
                         'data-target'=>'#submit_vote'.$model->id,
                         'title'=> 'Assign'
                     ]);

                Modal::begin([
                    'size' => 'modal-lg',
                    'options' => [
                        'id' => 'submit_vote'.$model->id,
                    ],
                    'header' => '<h2>Create Vote</h2>',
                    'footer' => 'Footer'
                ]);

                ActiveForm::begin([
                    'action' => 'vote/vote',
                    'method' => 'post',
                    'id' => 'form'.$model->id
                ]);

                echo Html::input(
                        'type: text',
                        'search',
                        '',
                        [
                            'placeholder' => 'Search...',
                            'class' => 'form-control'
                        ]
                );

                echo Html::submitButton(
                        '<span class="glyphicon glyphicon-search"></span>',
                        [
                            'class' => 'btn btn-success',
                        ]
                );
                ActiveForm::End();
                Modal::end();

在Form'action'中,我写了投票/投票和方法帖子.所以我希望在我的VoteController的actionVote函数中发布数据.

public …

当您点击列表中的特定餐馆时,我试图显示有关餐馆的更多详细信息.目前,我在列表中显示一个餐馆列表,其中包含一个更多信息的按钮.我希望这些信息以模态显示

当我点击列表中的不同餐馆时,每个餐馆的模式中显示的信息都是相同的.

这是我正在使用的代码

 @foreach (var item in Model)
            {
        <!-- Modal -->
                <div class="modal fade" id="myModal" role="dialog">
                    <div class="modal-dialog">

                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <center><h2 id="modalTitle" class="modal-title">@item.RestaurantName</h2></center>
                            </div>
                            <div class="modal-body">
                                <ul class="details">
                                    <li class="modalListItem">
                                        <i class="fa fa-info-circle fa-5" aria-hidden="true"></i>
                                        <span>@item.RestaurantDescription</span>
                                    </li>
                                    <li class="modalListItem">
                                        <i class="fa fa-envelope fa-5" aria-hidden="true"></i>
                                        <span>@item.RestaurantEmailAddress</span>
                                    </li>
                                    <li class="modalListItem">
                                        <i class="fa fa-clock-o fa-5" aria-hidden="true"></i>
                                        <span>Opens from @item.OpeningTime.TimeOfDay - @item.ClosingTime.TimeOfDay</span>
                                    </li>
                                    <li class="modalListItem">
                                        <i class="fa fa-list-alt fa-5" aria-hidden="true"></i>
                                        <span>@item.FurtherDetails</span>
                                    </li>
                                    <li class="modalListItem"> …

我正在尝试从子级调用父类的函数以关闭模式。但是，我总是undefined is not an object this.ref.modal

这就是我所拥有的：

1st 

Import Two from ‘./Two’;


export default class One extends Component {
    static closeModal(){
            this.refs.modal.close();
    }
    <Modal>
    </Two>
    </Modal>
}

2nd

Import One from ‘./One’;

export default class Two extends Component {
    randomFunction(){
       One.CloseModal();
}
}

第一个组件是模式框，第二个组件是Camera。我想从Camera组件关闭第一个模态。难道我做错了什么？