build a model dialog

sir go through some stapes

1 - create a html file named Popup.html like bellow code

>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
head>
<body>
Thanks you
body>
html>

pest the bellow code in the view page

@{
Layout = null;
}
>
<html data-ng-app="test">
<head>
@* <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://gitcdn.github.io/bootstrap-toggle/2.1.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.3.min.js">script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js">script>
<script src="https://code.angularjs.org/1.4.7/angular.js">script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.1.0/js/bootstrap-toggle.min.js">script>*@
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js">script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js">script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script>
angular.module('PopupDemo', ['ui.bootstrap']);
angular.module('PopupDemo')
.controller('PopupDemoController',
['$scope', '$modal',
function ($scope, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({ templateUrl: 'Popup.html' });
alert("OK");
}
}
]
);
script>
head>
<body ng-app="PopupDemo">
<div ng-controller="PopupDemoController">
<a ng-click="open()" >Open Popupa>
div>
body>
html>

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Laxmidhar Sahoo8y ago
sir go through some stapes
1 - create a html file named Popup.html like bellow code
>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>title>
head>
<body>
    Thanks you
body>
html>
pest the bellow code in the view page
@{
    Layout = null;
}


>
<html data-ng-app="test">
  <head>
  @*  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.1.0/css/bootstrap-toggle.min.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-2.1.3.min.js">script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js">script>
    <script src="https://code.angularjs.org/1.4.7/angular.js">script>
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.1.0/js/bootstrap-toggle.min.js">script>*@
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js">script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js">script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script>
        angular.module('PopupDemo', ['ui.bootstrap']);
        angular.module('PopupDemo')
.controller('PopupDemoController',
['$scope', '$modal',
function ($scope, $modal) {

    $scope.open = function () {

        var modalInstance = $modal.open({ templateUrl: 'Popup.html' });
        alert("OK");
    }
}

]
);


    script>

  head>

  <body ng-app="PopupDemo">
<div ng-controller="PopupDemoController">
<a ng-click="open()" >Open Popupa>
div>
body>
html>
0
Akshay Phadke8y ago
simple and straight forward code

Modal Header
Some text in the modal.
0
Ankit Sharma8y ago
Hi Sachin,

Please visit belwo links

https://stackoverflow.com/questions/43533463/how-to-create-a-modal-popup-that-is-compatible-with-angular-4

https://material.angular.io/components/dialog/overview
0

build a model dialog

Modal Header