单击一个按钮并显示弹出窗口，而无需使用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)
    );
  };
});