我在这里遇到一个奇怪的问题。我正在做的事情可能是一个非常愚蠢的错误。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="add-trainers-controls">
<div class="add-remove-control">
<input id="add-trainer" type="image" src="img/add5.png" alt="Submit" width="48" height="48" onclick="addTrainer()">
</div>
</div>
<!-- The Modal -->
<div id="add-trainers-form" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="close" class="close">×</span>
<p>Add Trainers</p>
<input class="textStyle" type="text" placeholder="Username">
<input class="textStyle" type="text" placeholder="Email">
<button id="add-trainer-btn" class="buttonStyle" type="button">Add</button>
</div>
</div>
</div>#add-trainer
当我点击css按钮时，会弹出模态。其默认display:none属性设置为display:block。点击后将其设置为none。当我单击模态窗口外的任何位置时，显示属性将重置为#add-trainer-btn。但同样需要使用#close和CanvasRenderingContext2D.prototype.stretchText = function(text, x, y, xw, xh) {
var c = document.createElement("canvas").getContext("2d");
c.font = this.font;
c.fillColor = this.fontColor;
var w = c.measureText(text).width;
var h = parseInt(this.font);
c.fillText(text, 0, h);
this.drawImage(c.canvas, 0, 0, w, h, x, y, w+xw, h+xh);
}
var ctx = document.getElementById("c").getContext("2d");
ctx.font = "20px Arial";
ctx.fillColor = "black";
ctx.stretchText("Hello World!", 10, 20, 0, 40);
按钮进行操作。