javascript - 单击按钮时的模态不显示

标签 javascript css angularjs

尝试在单击按钮时启动模式。我可以 console.log “按钮被点击”但是模式不会显示。请帮我找到我要去哪里错了。一直在寻找一段时间，但我不知何故忽略了错误。谢谢。

完整的代码可以在这个 Codepen 找到:https://codepen.io/centem/pen/BaajLZm 

var app = angular.module('myApp', []);
  app.controller('myController',
        function ($scope, $http) {

  $scope.list = [
  {
     "ID": "001",
     "Name": "Eurasian Collared-Dove",
     "Type": "Dove"
  },
  {
      "ID": "002",
      "Name": "Bald Eagle",
      "Type": "Hawk"
  },
  {
      "ID": "003",
      "Name": "Cooper's Hawk",
      "Type": "Hawk"
  },
  {
      "ID": "004",
      "Name": "Bell's Sparrow",
      "Type": "Sparrow"
  },
  {
      "ID": "005",
      "Name": "Mourning Dove",
      "Type": "Dove"
  },
  {
      "ID": "006",
      "Name": "Rock Pigeon",
      "Type": "Dove"
  },
  {
      "ID": "007",
      "Name": "Abert's Towhee",
      "Type": "Sparrow"
  },
  {
      "ID": "008",
      "Name": "Brewer's Sparrow",
      "Type": "Sparrow"
  },
  {
      "ID": "009",
      "Name": "Canyon Towhee",
      "Type": "Sparrow"
  },
  {
      "ID": "010",
      "Name": "Black Vulture",
      "Type": "Hawk"
  },
    {
     "ID": "011",
     "Name": "Eurasian Collared-Dove",
     "Type": "Dove"
  },
  {
      "ID": "012",
      "Name": "Bald Eagle",
      "Type": "Hawk"
  },
  {
      "ID": "013",
      "Name": "Cooper's Hawk",
      "Type": "Hawk"
  },
  {
      "ID": "014",
      "Name": "Bell's Sparrow",
      "Type": "Sparrow"
  },
  {
      "ID": "015",
      "Name": "Mourning Dove",
      "Type": "Dove"
  },
  {
      "ID": "016",
      "Name": "Rock Pigeon",
      "Type": "Dove"
  },
  {
      "ID": "017",
      "Name": "Abert's Towhee",
      "Type": "Sparrow"
  },
  {
      "ID": "018",
      "Name": "Brewer's Sparrow",
      "Type": "Sparrow"
  },
  {
      "ID": "019",
      "Name": "Canyon Towhee",
      "Type": "Sparrow"
  },
  {
      "ID": "020",
      "Name": "Black Vulture",
      "Type": "Hawk"
  },
        {
     "ID": "021",
     "Name": "Eurasian Collared-Dove",
     "Type": "Dove"
  },
  {
      "ID": "022",
      "Name": "Bald Eagle",
      "Type": "Hawk"
  },
  {
      "ID": "023",
      "Name": "Cooper's Hawk",
      "Type": "Hawk"
  },
  {
      "ID": "024",
      "Name": "Bell's Sparrow",
      "Type": "Sparrow"
  },
  {
      "ID": "025",
      "Name": "Mourning Dove",
      "Type": "Dove"
  },
  {
      "ID": "026",
      "Name": "Rock Pigeon",
      "Type": "Dove"
  },
  {
      "ID": "027",
      "Name": "Abert's Towhee",
      "Type": "Sparrow"
  },
  {
      "ID": "028",
      "Name": "Brewer's Sparrow",
      "Type": "Sparrow"
  },
  {
      "ID": "029",
      "Name": "Canyon Towhee",
      "Type": "Sparrow"
  },
  {
      "ID": "030",
      "Name": "Black Vulture",
      "Type": "Hawk"
  }
  ];
  $scope.count = $scope.list.length;
  $scope.reverseOrder = true;
  $scope.sortField = 'ID';
    
  $scope.sortBy = function(sortField) {
  $scope.reverseOrder = ($scope.sortField === sortField) ? !$scope.reverseOrder : false;
      $scope.sortField = sortField;
  };
        
 });

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    console.log("button clicked");
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
body {
  margin: 0 auto;  
}

a {
  text-decoration: none;
}

nav {
  font-family: monospace;
  width: 100%;
  margin: auto;
  display: flex;
  /*justify-content: center;*/
  justify-content: space-between;
  background: rgb(67, 66, 66);
  align-items: center;
}

ul {
  background: rgb(67, 66, 66);
  list-style: none;
  margin: 0;
  padding-left: 0;
}

li {
  color: #fff;
  background: rgb(67, 66, 66);
  display: block;
  float: left;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  transition-duration: 0.3s;
  width: 70px;
}
  
li a {
  color: #fff;
}

li:hover,
li:focus-within {
    background: rgb(0,0,0);
    cursor: pointer;
}

li:focus-within a {
  outline: none;
}

ul li ul {
    background: rgb(67, 66, 66);
    visibility: hidden;
  opacity: 0;
  min-width: 5rem;
    position: absolute;
  transition: all 0.3s ease;
  margin-top: 1rem;
    left: 0;
  display: none;
}

ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
  visibility: visible;
  opacity: 1;
  display: block
}

ul li ul li {
  clear: both;
  width: 100%;
}

section {
  width: 90%;
  margin: auto;
  margin-top: 50px;
  display: block;
  border: 1px solid black;
  min-height: 400px;
  max-height: 700px;
  overflow: auto;
}

.section-header {
  border-bottom: 1px solid black;
  padding: 5px;
  background-color: #7C9DB9;
}

.section-header > div {
  display: inline-block;
}

.section-header div:nth-child(3) {
  color: red;
  float: right;
}

.content {
  padding: 5px;
}

#company-name {
  float: left;
  vertical-align: middle;
}

.logo {
  float: right;
  vertical-align: middle;
}

img {
  height: 40px;
  vertical-align: middle;
}

footer {
  font-family: monospace;
  width: 100%;
  margin: auto;
  display: flex;
  /*justify-content: center;*/
  justify-content: space-between;
  background: rgb(67, 66, 66);
  align-items: center;
}

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

span {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<nav>
  <img id="company-name" src="https://i.imgur.com/MOBXeoA.jpg">
  <ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a>
      <ul>
        <li href="#">One</li>
        <li href="#">Two</li>
      </ul>
    </li>
    <li><a href="#">Three</a>
      <ul>
        <li href="#">One</li>
        <li href="#">Two</li>
        <li href="#">Three</li>
      </ul>
    </li>
    <li><a href="#">Four</a></li>
    <li><a href="#">Five</a></li>
  </ul><span>
  <img class="logo" src="https://i.imgur.com/ITht7Gc.jpg">
  <img class="logo" src="https://i.imgur.com/qNV0oMX.jpg">
  </span>
</nav>

<section ng-app="myApp" ng-controller="myController">
  <div class="section-header">
    <div>One</div>
    <div>Two</div>
    <div>Count: {{list.length}}</div>
  </div>
  <div class="content">
          <label>Search: <input ng-model="searchText"></label>
        <table id="searchTextResults">
            <tr>
                <th ng-click="sortBy('ID')">ID</th>
                <th ng-click="sortBy('Name')">Bird Name</th>
                <th ng-click="sortBy('Type')">Type of Bird</th>
            </tr>

            <tr ng-repeat="birds in list | filter:searchText | orderBy:sortField:reverseOrder">
              <td><a href="#">{{birds.ID}}</a></td>
              <td><a href="#">{{birds.Name}}</a></td>
              <td><a href="#">{{birds.Type}}</a></td>
              <td><button id="myBtn">Edit</button></td>
            </tr>
      </table>
  </div>
</section>


<!--
<footer>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</footer>-->

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

最佳答案

好的，首先，编辑按钮位于 ng-repeat 中，这将创建如此多的按钮，并且所有按钮都具有相同的 ID，这是无效的，因为每个元素都必须具有唯一的 编号。

其次，您无法访问在 Angulars 上下文中创建的按钮 getElementById，因为它甚至在按钮呈现之前就已执行。当您点击按钮时，函数绑定(bind)到窗口，因此它会记录。下面是一个工作正常的示例代码。只需在 Controller 内部创建一个函数来打开模态。下面是一个工作示例。 

var app = angular.module('myApp', []);
app.controller('myController',
  function($scope, $http) {

    $scope.list = [{
        "ID": "001",
        "Name": "Eurasian Collared-Dove",
        "Type": "Dove"
      },
      {
        "ID": "002",
        "Name": "Bald Eagle",
        "Type": "Hawk"
      },
      {
        "ID": "003",
        "Name": "Cooper's Hawk",
        "Type": "Hawk"
      },
      {
        "ID": "004",
        "Name": "Bell's Sparrow",
        "Type": "Sparrow"
      },
      {
        "ID": "005",
        "Name": "Mourning Dove",
        "Type": "Dove"
      },
      {
        "ID": "006",
        "Name": "Rock Pigeon",
        "Type": "Dove"
      },
      {
        "ID": "007",
        "Name": "Abert's Towhee",
        "Type": "Sparrow"
      },
      {
        "ID": "008",
        "Name": "Brewer's Sparrow",
        "Type": "Sparrow"
      },
      {
        "ID": "009",
        "Name": "Canyon Towhee",
        "Type": "Sparrow"
      },
      {
        "ID": "010",
        "Name": "Black Vulture",
        "Type": "Hawk"
      },
      {
        "ID": "011",
        "Name": "Eurasian Collared-Dove",
        "Type": "Dove"
      },
      {
        "ID": "012",
        "Name": "Bald Eagle",
        "Type": "Hawk"
      },
      {
        "ID": "013",
        "Name": "Cooper's Hawk",
        "Type": "Hawk"
      },
      {
        "ID": "014",
        "Name": "Bell's Sparrow",
        "Type": "Sparrow"
      },
      {
        "ID": "015",
        "Name": "Mourning Dove",
        "Type": "Dove"
      },
      {
        "ID": "016",
        "Name": "Rock Pigeon",
        "Type": "Dove"
      },
      {
        "ID": "017",
        "Name": "Abert's Towhee",
        "Type": "Sparrow"
      },
      {
        "ID": "018",
        "Name": "Brewer's Sparrow",
        "Type": "Sparrow"
      },
      {
        "ID": "019",
        "Name": "Canyon Towhee",
        "Type": "Sparrow"
      },
      {
        "ID": "020",
        "Name": "Black Vulture",
        "Type": "Hawk"
      },
      {
        "ID": "021",
        "Name": "Eurasian Collared-Dove",
        "Type": "Dove"
      },
      {
        "ID": "022",
        "Name": "Bald Eagle",
        "Type": "Hawk"
      },
      {
        "ID": "023",
        "Name": "Cooper's Hawk",
        "Type": "Hawk"
      },
      {
        "ID": "024",
        "Name": "Bell's Sparrow",
        "Type": "Sparrow"
      },
      {
        "ID": "025",
        "Name": "Mourning Dove",
        "Type": "Dove"
      },
      {
        "ID": "026",
        "Name": "Rock Pigeon",
        "Type": "Dove"
      },
      {
        "ID": "027",
        "Name": "Abert's Towhee",
        "Type": "Sparrow"
      },
      {
        "ID": "028",
        "Name": "Brewer's Sparrow",
        "Type": "Sparrow"
      },
      {
        "ID": "029",
        "Name": "Canyon Towhee",
        "Type": "Sparrow"
      },
      {
        "ID": "030",
        "Name": "Black Vulture",
        "Type": "Hawk"
      }
    ];
    $scope.count = $scope.list.length;
    $scope.reverseOrder = true;
    $scope.sortField = 'ID';

    $scope.sortBy = function(sortField) {
      $scope.reverseOrder = ($scope.sortField === sortField) ? !$scope.reverseOrder : false;
      $scope.sortField = sortField;
    };

    $scope.openModal = function() {
      debugger
      modal.style.display = "block";
    }
  });

// Get the modal
var modal = document.getElementById('myModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  console.log("button clicked");
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
body {
  margin: 0 auto;
}

a {
  text-decoration: none;
}

nav {
  font-family: monospace;
  width: 100%;
  margin: auto;
  display: flex;
  /*justify-content: center;*/
  justify-content: space-between;
  background: rgb(67, 66, 66);
  align-items: center;
}

ul {
  background: rgb(67, 66, 66);
  list-style: none;
  margin: 0;
  padding-left: 0;
}

li {
  color: #fff;
  background: rgb(67, 66, 66);
  display: block;
  float: left;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  transition-duration: 0.3s;
  width: 70px;
}

li a {
  color: #fff;
}

li:hover,
li:focus-within {
  background: rgb(0, 0, 0);
  cursor: pointer;
}

li:focus-within a {
  outline: none;
}

ul li ul {
  background: rgb(67, 66, 66);
  visibility: hidden;
  opacity: 0;
  min-width: 5rem;
  position: absolute;
  transition: all 0.3s ease;
  margin-top: 1rem;
  left: 0;
  display: none;
}

ul li:hover>ul,
ul li:focus-within>ul,
ul li ul:hover,
ul li ul:focus {
  visibility: visible;
  opacity: 1;
  display: block
}

ul li ul li {
  clear: both;
  width: 100%;
}

section {
  width: 90%;
  margin: auto;
  margin-top: 50px;
  display: block;
  border: 1px solid black;
  min-height: 400px;
  max-height: 700px;
  overflow: auto;
}

.section-header {
  border-bottom: 1px solid black;
  padding: 5px;
  background-color: #7C9DB9;
}

.section-header>div {
  display: inline-block;
}

.section-header div:nth-child(3) {
  color: red;
  float: right;
}

.content {
  padding: 5px;
}

#company-name {
  float: left;
  vertical-align: middle;
}

.logo {
  float: right;
  vertical-align: middle;
}

img {
  height: 40px;
  vertical-align: middle;
}

footer {
  font-family: monospace;
  width: 100%;
  margin: auto;
  display: flex;
  /*justify-content: center;*/
  justify-content: space-between;
  background: rgb(67, 66, 66);
  align-items: center;
}

tr:nth-child(even) {
  background: #CCC
}

tr:nth-child(odd) {
  background: #FFF
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}


/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

span {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.4/angular.min.js"></script>
<nav>
  <img id="company-name" src="https://i.imgur.com/MOBXeoA.jpg">
  <ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a>
      <ul>
        <li href="#">One</li>
        <li href="#">Two</li>
      </ul>
    </li>
    <li><a href="#">Three</a>
      <ul>
        <li href="#">One</li>
        <li href="#">Two</li>
        <li href="#">Three</li>
      </ul>
    </li>
    <li><a href="#">Four</a></li>
    <li><a href="#">Five</a></li>
  </ul><span>
  <img class="logo" src="https://i.imgur.com/ITht7Gc.jpg">
  <img class="logo" src="https://i.imgur.com/qNV0oMX.jpg">
  </span>
</nav>

<section ng-app="myApp" ng-controller="myController">
  <div class="section-header">
    <div>One</div>
    <div>Two</div>
    <div>Count: {{list.length}}</div>
  </div>
  <div class="content">
    <label>Search: <input ng-model="searchText"></label>
    <table id="searchTextResults">
      <tr>
        <th ng-click="sortBy('ID')">ID</th>
        <th ng-click="sortBy('Name')">Bird Name</th>
        <th ng-click="sortBy('Type')">Type of Bird</th>
      </tr>

      <tr ng-repeat="birds in list | filter:searchText | orderBy:sortField:reverseOrder">
        <td><a href="#">{{birds.ID}}</a></td>
        <td><a href="#">{{birds.Name}}</a></td>
        <td><a href="#">{{birds.Type}}</a></td>
        <td><button ng-click="openModal()" class="myBtn">Edit</button></td>
      </tr>
    </table>
  </div>
</section>


<!--
<footer>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</footer>-->

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

希望这有帮助:)

关于javascript - 单击按钮时的模态不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58388495/

上一篇：html - Bootstrap 4崩溃链接aria-expanded =“true”不起作用

下一篇：jquery - 设计 DIV 以缩小垂直间隙

相关文章：

javascript - 通过连接调度操作我收到错误最大调用堆栈大小超出

javascript - 如何将一个对象的值复制到另一个对象的键中？

javascript - 如何在不更改同一 div 中其他元素的不透明度的情况下更改 div 的不透明度？

javascript - AngularJS ng-repeat 如果不是对象则隐藏重复项

javascript - JQuery 自动完成出现在 JQuery 菜单后面

javascript - 如何在php中的if block 中显示div

javascript - 在 jQuery UI Datepicker 中为选定的日期添加一个特殊类

具有单选外观和感觉的 HTML <select> 多个

javascript - 如何使用 ng-if 显示列表中是否定义了某个项目

angularjs - 如何使用谷歌 Ajax 抓取 Angular

©2024 IT工具网  联系我们