單擊一個按鈕並顯示彈出窗口，而無需使用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)
    );
  };
});