Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Angularjs Open Url in New Browser Window with Custom Height Width Example

May 9, 2015
Introduction

Here I will explain how to open url in new browser window using
AngularJS with custom height and width on button click example or AngularJS open new popup / browser window on button click or AngularJS open child window from parent window on button click with example. By using “$window.open” we can new popup browser window with custom size in AngularJS.

Description:
  
In previous articles I explained
Angularjs convert number to currency format, Angularjs get dropdownlist selected value, Angularjs convert text to uppercase while typing, Angularjs refresh div for every 1 second using interval mode and many articles relating to AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to open new browser window with custom height and width on button click using AngularJS.

To open new browser / popup window using AngularJS we need to write the code like as shown below


// Open New Child / Browser Window
$scope.openChildWindow = function () {
var left = screen.width / 2 - 200, top = screen.height / 2 - 250
$window.open('http://www.aspdotnet-suresh.com', '', "top=" + top + ",left=" + left + ",width=400,height=500")
}

If you want to check it in complete example we need to write the code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Angularjs Open New Browser Window with Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('sampleapp', [])
myApp.controller("expressionController", function ($scope,$window) {
// Open New Child / Browser Window
$scope.openChildWindow = function () {
var left = screen.width / 2 - 200, top = screen.height / 2 - 250
$window.open('http://www.aspdotnet-suresh.com', '', "top=" + top + ",left=" + left + ",width=400,height=500")
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div data-ng-app="sampleapp" data-ng-controller="expressionController">
<input type="button" value="Open Popup Window" ng-click="openChildWindow()"/> <br /><br />
</div>
</form>
</body>
</html>

Live Demo

For live demo click on below button to open new window



If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

2 comments :

Amila Weerasekara said...
This comment has been removed by the author.
Unknown said...

Great :)

But if i want to open it in modal popup instead of new window how to do it?

Give your Valuable Comments

Other Related Posts

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.