对于新手问题,我深表歉意。我试图在我的 Rails 应用程序上实现 Bootstrap Modal 功能。具体来说,当用户单击特定图像时,模式就会被激活,显示该特定图像。我查看了以下SO问题(Twitter Bootstrap Modal Form Submit)和(Twitter Bootstrap Modal Form Submit),但按照说明进行操作后,我遇到了这个问题>特定的项目图片没有传输到我使用javascript的模态。我已经在下面提供了所有相关代码,非常感谢你们。
index.html.erb
<%= image_tag item.avatar.url(:medium), class: "open-AddImgDialog", id:"test", data: { target: "#myModal", toggle: "modal"} %>
<div class="modal fade" tabindex="-1" id="imagemodal" role="dialog">
<div class="modal-dialog" role="document" >
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<%= item.product %>
</div>
<br/>
<h4 class="modal-title">
<%= item.product %>
</h4>
<div class="modal-body">
<div id="picture" style="border: 1px solid black; width: 200px; height: 200px;">
<canvas id="myCanvas" width="200" height="200"></canvas>
</div>
<br/>
<br/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
application.js
$(document).on('click',".open-AddImgDialog", function() {
html2canvas($("#picture"), {
onrendered: function (canvas) {
//theCanvas = canvas;
//document.body.appendChild(canvas);
//Canvas2Image.saveAsPNG(canvas);
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("test");
var x = 0;
var y = 0;
var width = 200;
var height = 200;
ctx.drawImage(img, x, y, width, height);
}
});
});
最佳答案
必须聘请专业开发人员来弄清楚到底发生了什么。这是有效的正确答案以及对其原因的解释 - 希望它可以帮助陷入类似困境的人。
导致这个问题的原因是我们有 <% @items.each do |item| %> 后跟 <%= image_tag item.avatar.url(:medium), class: "open-AddImgDialog", id:"test", data: { target: "#myModal", toggle: "modal"} %>
然后是上面列出的模态代码。这会导致当模式被激活时,相同的图像(第一个项目图像)会一遍又一遍地出现。在处理 @items.each 时,此问题的解决方案是利用更灵活的 id,当我们从一个项目帖子移至另一个项目帖子时,该 id 可以动态更改。
<%= image_tag item.avatar.url(:medium), class: "block", id: "image-#{dom_id(item)}", data: { target: "#myModal-#{dom_id(item)}", toggle: "modal"} %>
<div class="modal fade" tabindex="-1" id="myModal-<%= dom_id(item) %>" aria-labelledby="myModalLabel" role="dialog">
.....
#Everything else follows normal bootstrap conventions
关于javascript - Rails 应用程序的 Bootstrap Modal 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41214773/