Click a button and show pop-up window without using Alert()

Question

So, I have a few buttons in my HTML code that once they're clicked they increment a counter in a database table. I also want to make it so that once one of them is clicked a small window pops up and has some custom text inside it. Maybe like a static image would do the trick, but I've no idea how to do this. Here's a small gif I've created in order to try and explain me properly (Did this really quick, so don't expect perfection ahah)

I've searched the web for a bit and couldn't really find anything relevant. Is this even possible to achieve? I'm assuming you'd need to use JS?

Answer 1

Suggesting this for custom windows:

HTML

<button onclick="openWindow()">Button
</button>

JavaScript

function openWindow() {
  var win = window.open("", "Title", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=780, height=200, top="+(screen.height-400)+", left="+(screen.width-840));
  win.document.body.innerHTML = "Text";
}

Answer 2

Depends on how fancy you want to get. I found that using AngularJS with Angular-Material offers the best popup solution. It's clean and responsive. Although, it may be overkill for your popup box.

Here is a working demo to show you the different options from the Google devs:
CodePen

HMTL:

<div ng-controller="AppCtrl" class="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak="" ng-app="MyApp">
  <div class="dialog-demo-content" layout="row" layout-wrap="" layout-margin="" layout-align="center">
    <md-button class="md-primary md-raised" ng-click="showAlert($event)">
      Alert Dialog
    </md-button>
  </div>
</div>

JS:

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('AppCtrl', function($scope, $mdDialog) {
  $scope.status = '  ';
  $scope.customFullscreen = false;

  $scope.showAlert = function(ev) {
    $mdDialog.show(
      $mdDialog.alert()
        .parent(angular.element(document.querySelector('#popupContainer')))
        .clickOutsideToClose(true)
        .title('This is an alert title')
        .textContent('You can specify some description text in here.')
        .ariaLabel('Alert Dialog Demo')
        .ok('Got it!')
        .targetEvent(ev)
    );
  };
});