单击按钮并显示弹出窗口而不使用Alert（）

Question

所以，我的HTML代码中有一些按钮，一旦它们被点击，它们就会增加数据库表中的计数器。我也想做到这一点，一旦点击其中一个，弹出一个小窗口，里面有一些自定义文本。也许像静态图像可以做到这一点，但我不知道如何做到这一点。这是我创建的一个小gif，是为了试着正确地解释我（这真的很快，所以不要期待完美啊）

我在网上搜索了一下，无法找到任何相关内容。这有可能实现吗？我假设您需要使用JS？

Answer 1

为自定义窗口建议：

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

取决于你想得到多么花哨。我发现将AngularJS与Angular-Material一起使用可提供最佳弹出解决方案。它干净，反应灵敏。虽然，弹出框可能有点过分。

这是一个工作演示，向您展示Google开发者的不同选项：
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)
    );
  };
});