【发布时间】：2019-10-15 14:42:34
【问题描述】：
尝试在单击按钮时启动模式。我可以 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">×</span>
<p>Some text in the Modal..</p>
</div>
</div>【问题讨论】：
标签： javascript css angularjs