0

I am trying to display a simple modal on click of a button. The modal does not pop up. It displays the contents on the same existing window.(snapshot attached)

My Code is below:

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>

Please let me know why modal is not working.

Screenshot

MDK
  • 1
  • 1
  • Firstly include either ngDialog.min.js or ngDialog.js (as both are same). Also include it before app.js. And what is the error that you are getting? – Sujata Chanda Nov 20 '15 at 09:31

3 Answers3

1

You should include css files of ngDialog in header:

<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>
Enigo
  • 3,685
  • 5
  • 29
  • 54
0
ngDialog.open({
       template: 'addTaskForm.html',
       scope : $scope,
       resolve: {
           data: function sendData() {
               return data; // if you need to pass any data
           }
       }
});
bfontaine
  • 18,169
  • 13
  • 73
  • 107
Syam Pillai
  • 4,967
  • 2
  • 26
  • 42
0

I was facing same problem and implemented above suggestions by @Enigo and @Sujata but didn't help. Upon analysing further I noticed my mistake of rendering CSS files as media="print" so corrected them to media="screen" See below:

<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" />

Hope this helps. Please note @Styles.Url() is ASP.NET MVC Razor syntax.

jitin14
  • 144
  • 5