Building an overlay (or modal window) in AngularJS has been on my mind, and I've made some progress with the html/css layout. Here's a sneak peek at what it looks like:
<section class="calendar">
<a open-overlay="overlay-new-calendar">Add New Calendar</a>
</section>
<section class="overlay overlay-new-calendar">
<span class="bg"></span>
<form class="wrap">
<header>
Add a New My Calendar
</header>
<div class="main">
<label>Name<input type="text" required ng-model="newCalendar.calendar_name" /></label>
<label>Color<input type="text" required ng-model="newCalendar.calendar_color" /></label>
</div>
<footer>
<button type="submit">Add</button>
<a close-overlay="overlay-new-calendar">Cancel</a>
</footer>
</form>
</section>
In the setup above, you will notice that I have used an anchor
<a open-overlay="overlay-new-calendar">Add New Calendar</a>fixEvents.directive('openOverlay', function() {
return function(scope, elem, attr) {
elem.bind('click', function() {
alert(attr.open-overlay);
$('.overlay-new-calendar').show();
});
}
});
I am struggling to retrieve the attribute to display overlay-new-calendar. Furthermore, I would appreciate any suggestions on implementing show/hide functionalities without relying on jQuery. Your insights are greatly appreciated! - Daniel