Question

我试图在点击按钮时显示一个简单的模态。模态不会弹出。它在同一个现有窗口中显示内容。（附带快照）

我的代码如下：

的index.html

<!DOCTYPE html>
<html ng-app="Pcp">
<head>
    <script src="js/jquery.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script src="ng-dialog/js/ngDialog.min.js"></script>
    <script src="ng-dialog/js/ngDialog.js"></script>
</head>
<body>
    <div ng-controller="MainController">
    <button ng-click="openTaskForm()">Open</button>
    </div>
</body>
</html>

app.js

(function(){
    var app = angular.module('Pcp',['ngDialog']);
     app.controller('MainController', function($scope, ngDialog)
    {
        $scope.openTaskForm = function(){
        ngDialog.open({template: 'addTaskForm.html'

        });

        };      
    }
);

})();

addTaskForm.html

<div>
    <h2>Contact us<h2>
    <input type="text" placeholder="Name" ng-model="name" />
    <input type="text" placeholder="Email" ng-model="email" />
    <input type="text" placeholder="Mobile" ng-model="mobile" />
    <textarea placeholder="Enter your message or query..." ng-model="message"></textarea>
    <div class="ngdialog-buttons">
        <button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click=closeThisDialog("Cancel")>Cancel</button>
        <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click=confirm("OK")>OK</button>
        </div>
</div>

请让我知道为什么模态不起作用。

Screenshot

Answer 1

您应该在标题中包含ngDialog的css文件：

<head>
    <script src="js/jquery.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script src="ng-dialog/js/ngDialog.min.js"></script>
    <script src="ng-dialog/js/ngDialog.js"></script>

    <link rel="stylesheet" th:href="@{/css/ngDialog.css}" href="../../css/ngDialog.css" > </link>
    <link rel="stylesheet" th:href="@{/css/ngDialog-theme-default.css}" href="../../css/ngDialog-theme-default.css" > </link>
</head>

Answer 2

ngDialog.open({
       template: 'addTaskForm.html',
       scope : $scope,
       resolve: {
           data: function sendData() {
               return data; // if you need to pass any data
           }
       }
});

Answer 3

我遇到了同样的问题，并通过@Enigo和@Sujata实现了上述建议，但没有帮助。经过进一步分析，我注意到将CSS文件呈现为media="print"的错误，因此将其更正为media="screen"，请参见下文：

<link href='@Styles.Url("~/lib/Dialog/ngDialog-theme-default.css")' rel="stylesheet" type="text/css" media="screen" />
<link href='@Styles.Url("~/lib/Dialog/ngDialog-theme-plain.css")' rel="stylesheet" type="text/css" media="screen" />

希望这会有所帮助。请注意@Styles.Url()是ASP.NET MVC Razor语法。

ngDialog模式不会弹出

3 个答案: