[英]How to open modal with Javascript?
I am a student learning to code and have just started to learn javascript/jquery. 我是一名学习编码的学生,刚刚开始学习javascript / jquery。 I have created a RoR chess game and am currently working on the promotion move.
我已经创建了RoR棋牌游戏,目前正在从事促销活动。 Basically, once a Pawn piece has reached the opposite end of the board, a modal should open and give the player a selection of pieces to choose from to replace the pawn with.
基本上,当典当棋子到达棋盘的另一端时,应该打开一个模式,并为玩家提供一系列棋子供您选择,以替换棋子。 On the front end I have this modal that should automatically be triggered when a pawn meets the necessary conditions.
在前端,我有此模式,当典当满足必要条件时应自动触发该模式。 I created a function
is_pawn_promotion
that should do so, but the modal still does not open on it's own, and now I am unsure what to do next. 我创建了一个函数
is_pawn_promotion
,该函数应该这样做,但是模态仍然无法自行打开,现在我不确定下一步该怎么做。 I am wondering if the is_pawn_promotion
function is not being called properly (obviously it is not). 我想知道
is_pawn_promotion
函数是否未正确调用(显然不是)。 I have tried to reorganize the location of the openModal function but to no avail. 我试图重新组织openModal函数的位置,但无济于事。 Any help would be greatly appreciated and hopefully I have provided a clear enough picture of what is going on.
任何帮助将不胜感激,希望我已经提供了足够清晰的画面。
Here is the JS file containing the is_pawn_promotion
. 这是包含
is_pawn_promotion
的JS文件。 I have included the whole file which contains the openModal
function I am trying to call in order to open the modal. 我已经包含了整个文件,其中包含我试图调用以打开模式的
openModal
函数。
$( function() {
$( ".piece" ).draggable({
snap: ".piece-square",
grid: [60, 60],
containment: ".game-board",
});
$( ".piece-square" ).droppable({
accept: ".piece",
drop: function( event, ui ) {
var x = $(event.target).data('x');
var y = $(event.target).data('y');
var urlUpdatePath = $('.ui-draggable-dragging').data('url');
var is_pawn_promotion = function() {
return $(".piece") === 'Pawn' &&
(y === 0 || y === 7);
};
var sendAJAXRequest = function(x, y, type) {
$.ajax({
type: 'PUT',
url: urlUpdatePath,
data: { piece: { x_position: x, y_position: y, piece_type: type} },
success: function(response) {
if(response == 'OK') {
console.log(response);
} else {
alert(response);
}
}
});
};
if (is_pawn_promotion()) {
openModal();
var promoSubmitButton = $(".promo-selection-submit");
promoSubmitButton.on('click', function() {
var type = $('.promo-selection.input[selected]').val();
sendAJAXRequest(x, y, type);
});
} else {
sendAJAXRequest(x, y);
}
}
});
});
var openModal = function() {
// Change modal-state checkbox to checked
$("#promo-modal").prop("checked", true);
if ($("#promo-modal").is(":checked")) {
$("body").addClass("modal-open");
} else {
$("body").removeClass("modal-open");
}
$(".modal-fade-screen, .modal-close").on("click", function() {
$(".modal-state:checked").prop("checked", false).change();
});
$(".modal-inner").on("click", function(e) {
e.stopPropagation();
});
};
the modal 情态
<div class="modal">
<input class="modal-state" id="promo-modal" type="checkbox" />
<div class="modal-fade-screen">
<div class="modal-inner">
<div class="modal-close" for="promo-modal"></div>
<div class="promo-modal-text">
<h1>Pawn Promotion!</h1>
<h1>Make your selection: </h1>
</div>
<form action="#" class="pawn-promotion">
<div class="promo-selection-container">
<% [Queen, Knight, Bishop, Rook].each do |piece_type| %>
<div class="promo-selection">
<label>
<%= image_tag(piece_type.new(color: current_color).piece_image) %>
<%= piece_type.name %>
<input type="radio" name="promo-piece" value="<%= piece_type.name %>">
</label>
</div>
<% end %>
</div>
<br/>
<div class="promo-selection-submit">
<input type="submit">
</div>
</form>
</div>
</div>
</div>
You are calling the function, before you declare it. 在声明函数之前,您正在调用该函数。 Try changing its location.
尝试更改其位置。
I managed to find a solution on my own. 我设法自己找到了解决方案。 The main problem was how I was defining the
is_pawn_promotion
function. 主要问题是我如何定义
is_pawn_promotion
函数。 I changed that to the following: 我将其更改为以下内容:
var is_pawn_promotion = function() {
return ui.draggable.data('pieceType') === 'Pawn' &&
(y === 0 || y === 7);
};
I also had to add the data-piece-type
property to the actual piece in the view like so: 我还必须将
data-piece-type
属性添加到视图中的实际片段中,如下所示:
<div class="piece" data-url="<%= game_piece_path(piece.game, piece)%>" data-piece-type="<%= piece.piece_type %>">
<%= image_tag(piece.piece_image) %>
</div>
Now the modal opens when a pawn piece is in a position to be promoted. 现在,当典当块处于要提升的位置时,模式会打开。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.