AngularJS parent selector nearest to the element

Question

AngularJS parent selector nearest to the element

I have successfully implemented a code to close a custom popup using jQuery, but I am looking for a solution that utilizes AngularJS instead of jQuery. Can anyone assist me in finding the equivalent of this.closest() in AngularJS?

I aim to hide .popOverlay when .popClose is clicked, using AngularJS and not jQuery. I want a universal solution that can be applied to multiple popups without specifying individual classes or IDs.

Below is the jQuery code I currently have:

function popClose(e)
{
$(e).closest('.popOverlay').fadeOut('slow');
}

.popOverlay { background:rgba(0,0,0,.5); width:100%; height:100%; overflow-y:auto; position:fixed; left:0; top:0;}
.popBox { background:#fff; border-radius:5px; position:relative; width:400px; max-width:90%; padding:20px; margin-left:auto; margin-right:auto; margin-top:50px;}
.popClose { display:inline-block; position:absolute; top:5px; right:10px; cursor:pointer; color:#f00; font:bold 16px Arial, Helvetica, sans-serif;}
.heading { color:#0077c8; font:bold 16px Arial, Helvetica, sans-serif; margin-top:0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popOverlay">
<div class="popBox">
<a class="popClose" onClick="popClose(this)">x</a>
<h3 class="blue-heading">This is a custom popup.</h3>
</div>
</div>

javascript angularjs

Answer 1

Answer №1

In order to achieve the desired outcome, you can utilize ng-hide on a div element with the class name popOverlay and set it to true when the user clicks on the 'x' button.

Sample HTML:

<div ng-app="myApp" ng-controller="myCtrl">
  <div class="popOverlay" ng-hide="closePop">
    <div class="popBox">
      <a class="popClose" ng-click="popClose()">x</a>
      <h3 class="blue-heading">This is a custom popup</h3>
    </div>
  </div>
</div>

JavaScript code:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.popClose= function(){
    $scope.closePop= true;
    };
});

Click here for an example

Answer 2

In order to achieve the desired outcome, you can utilize ng-hide on a div element with the class name popOverlay and set it to true when the user clicks on the 'x' button.

Sample HTML:

<div ng-app="myApp" ng-controller="myCtrl">
  <div class="popOverlay" ng-hide="closePop">
    <div class="popBox">
      <a class="popClose" ng-click="popClose()">x</a>
      <h3 class="blue-heading">This is a custom popup</h3>
    </div>
  </div>
</div>

JavaScript code:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.popClose= function(){
    $scope.closePop= true;
    };
});

Click here for an example

Answer 3

Answer №2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popOverlay" ng-hide="popclose">
    <div class="popBox">
        <a class="popClose" onClick="popClose("true")">x</a>
        <h3 class="blue-heading">This is a custom popup.</h3>
    </div>
</div>


function popClose(status)
{
    if(status=="true"){
$scope.popclose=true;
}
}

give this code snippet a try. it did the trick for me!

Answer 4

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popOverlay" ng-hide="popclose">
    <div class="popBox">
        <a class="popClose" onClick="popClose("true")">x</a>
        <h3 class="blue-heading">This is a custom popup.</h3>
    </div>
</div>


function popClose(status)
{
    if(status=="true"){
$scope.popclose=true;
}
}

give this code snippet a try. it did the trick for me!

Answer 5

Answer №3

Consider utilizing the "bootstrap modal" as an alternative option.

For more information, check out http://getbootstrap.com/javascript/#modals

Answer 6

Consider utilizing the "bootstrap modal" as an alternative option.

For more information, check out http://getbootstrap.com/javascript/#modals

AngularJS parent selector nearest to the element

Answer №1

Answer №2

Answer №3

Similar questions

Struggling to properly align the Google Map on an AngularJS platform? Dive into the world of AngularJS Google Maps API

Analyzing Varied Date Formats

Using Material UI with Reactjs for Background Image Mapping

What is the simplest method to create a scroller for engaging narratives?

Using Vue.js along with vuex and axios allows for data retrieval only upon the second load

Upon attempting to retrieve a package version, NPM responds with an error stating "bash command not found."

What steps do I need to take to ensure NextJS stores my edits in VSCode?

Variable scope fails to update upon selection change

Try uploading a file with the imageUpload function in JavaScript, could be something basic

Search for a DIV element within iMacro on a consistent basis

Utilizing Phantom Js with Apache server

Creating an image gallery with animated effects: A step-by-step guide

The iron-session package does not export the path ./next/dist from the package

HTML checkbox utilizing JavaScript

What is the reason behind Ramda having multiple curry functions in its source code, much like Redux having multiple compose functions?

Setting orientations for portrait and landscape views using Material UI breakpoints

Encountering a build error when using the @babel parser on Netlify with npm

Launch in a new window using JavaScript

The function I created is having trouble connecting to the controller.js file

Enable and disable subscriptions in real-time to control the amount of cached data and prevent the error message "Uncaught TypeError: Converting circular structure to JSON"