I’m trying to open a modal when the user clicks a input field.
This is a PWA that will run inside a Flutter wrapper.
Parent HTML page:
<!-- abbreviated -->
<div class="form-row">
<div class="form-group col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<label>@T("Summary of evaluation")</label>
<input type="text" id="input_summary" data-field="LessonsLearned">
@Render("Block", ID: "Modal")
</div>
</div>
The @Render("Block", ID: "Modal")
is Razer syntax, calling the Modal HTML block.
Which you can see below.
<div id="modal" class="modal show" data-target="#modal" data-toggle="modal" role="dialog"
style="position: fixed; top: 0; display: none;">
<div class="modal-content" tabindex="-1"
style="position: asbsolute; top: 0; left: 0; right: 0; bottom: 0; display: block;">
<p id="modal_text"></p>
</div>
</div>
<script>
$(document).ready(function() {
// When the input field is clicked, open the modal
$("#input_summary").click(function() {
// Print a message to the console
console.log("Input field clicked");
// Get the value of the input field
var inputText = $("#input_summary").val();
// Set the text of the modal and show it
$("#modal_text").text(inputText);
$("#modal") .css({ position: "fixed", zIndex: 9999, display: "block", top: 0, left: 0, right: 0 })
.appendTo("#input_summary")
.show(
function() {
// Print a message to the console
console.log("Modal shown");
// This function is called when the modal is shown
$("#modal").addClass("show");
}
);
// When the modal is closed, hide it
$("#modal").on("hidden.bs.modal", function() {
// Print a message to the console
console.log("Modal hidden");
$("#modal").hide(
function() {
// This function is called when the modal is hidden
$("#modal").removeClass("show");
}
);
});
});
});
</script>
The two first console.log
are written to console successfully, but no modal is shown.