We Keep Coding

How do I close a bootstrap (5.2) Modal from Javascript?

For a school project's sake, I created a modal using bootstrap in html, inside of it there is a prompt that I must check from javascript, how do I close the Modal from javascript, so that in case the prompt is valid I can just save the changes and if it isn't I throw an exception?
small note (Please without jQuery, I've seen a similar thread that had as a reply using this library, it's forbidden for the assignment)
this is my html code :
<div class="modal fade" id="bidModal" tabindex="-1" aria-labelledby="bidModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="bidModalLabel">Bid amount</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="text" id="prompted">How much do you want to bet?</p>
<div class="input-group mb-2">
<input id="bAmount" type="text" class="form-control text" aria-label="Amount of bet">
<span class="input-group-text">€</span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel bid</button>
<button type="button" onClick="bid()" class="btn btn-success">Save bid</button>
</div>
</div>
</div>
</div>
this is my javascript code :
function bid(){
let valueOfBid = document.getElementById("bAmount").value;
if(isNaN(valueOfBid)){
//Cancel the prompt
}
players[realPlayer].bet=valueOfBid;
changeButtonState(false);
theTimer();
}

Please try like this. I suggest that you change isNaN(valueOfBid) to valueOfBid == "" before you add my code on your codebase.
function bid(){
let valueOfBid = document.getElementById("bAmount").value;
if(valueOfBid == ""){
alert(1)
//Cancel the prompt
var myModalEl = document.getElementById('bidModal');
var modal = bootstrap.Modal.getInstance(myModalEl)
modal.hide();
}
// players[realPlayer].bet=valueOfBid;
// changeButtonState(false);
}

you can add this to the element that should close the modal...
data-bs-dismiss="modal"
the following modal generates a list of links based off of a search term and user matches.
when they click one of the router links it will close the modal because of the line
<router-link :to="{ name: 'user', params: {user: user }}"
data-bs-dismiss="modal"
>{{ user }}
</router-link
>
the above code is generated INSIDE the modal -> here is the entire thing
<div class="full-page">
<div
class="modal fade"
id="findUser"
data-bs-backdrop="static"
data-bs-keyboard="false"
tabindex="-1"
aria-labelledby="staticBackdropLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Find User</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<label for="recipient-name" class="col-form-label"
>Steem Username:</label
>
<input
type="text"
v-model="userField"
class="form-control"
id="recipient-name"
/>
</div>
<div v-if="userField"></div>
<ul v-for="(user, index) in userMatches" :key="index">
<li>
<router-link
:to="{ name: 'user', params: { user: user } }"
data-bs-dismiss="modal"
>{{ user }}</router-link
>
</li>
</ul>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
</div>

How to link JS function to a Bootstrap Text Input Modal?

I have a basic Bootstrap Modal on my page with a text input field, which I will want to trigger upon clicking the "Report A Bug" button shown above.
<div class="btn-group" id="exampleModal" role="group">
<button id="myBtnToReportABug" type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal"> Report A Problem </button>
</div>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Please Provide A Short Description Of The Issue</h5>
<div class="input-group">
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Send Report</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
However I'm not sure of the best way to trigger it in Javascript. As you can see project already has a call to a modal, but its not a modal that is created in the HTML as I have with this 'Report A Bug' one.
$("#myBtnToReportABug").click(() => openModalPopup(cCenterUrl));
EDIT
Tried the Data Target method as mentioned below due to it's simplicity, but my Modal is not hidden nor does the click of the button trigger the modal to appear, any ideas?
<div class="btn-group" role="group">
<button id="myBtnToCcenter" type="button" target= '_blank' class="btn btn-primary"> Open CCenter </button>
<button id="myBtnToReportABug" type="button" target= '_blank' class="btn btn-secondary" data-toggle="modal" data-target=".modal-report"> Report A Problem </button>
</div>
<div class="modal-report" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Report A Bug</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Send Report</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

You trigger the modal with: data-target="#exampleModal"
Then you also need the right modal:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
Programmatically you have to do this
$('#exampleModalLabel').modal('show');
You previously need to initialize it with show: false so it won't show until you manually do it.
$('#exampleModalLabel').modal({ show: false})
Where exampleModalLabel is the id of the modal container.

How to show same swagger-editor twice on the same page in Angular 6

I want to implement the swagger-editor from npm swagger-editor-dist two times on the same html in Angular 6+. I have displayed swagger-editor on expand button in a modal and also below the expand button. However, it displays swagger only in the expanded modal and not in the div below it.
How can I display the same Swagger both the times?
Front -page ui-
Swagger in Modal -
code -
app.component.html
<div class="form-group">
<i class="fa fa-expand" data-toggle="modal" data-target="#exampleModalCenter">
</i>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Swagger of </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-12">
<div id="swagger-editorInbox" style="height:500px">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="row" style="border:solid 1px gray">
<div id="swagger-editorInbox" style="height:500px"></div>
</div>
</div>
app.component.ts
declare const SwaggerEditorBundle: any
export class swaggerComponent implements OnInit{
editorInbox :any
ngOnInit(){
this.editorInbox = SwaggerEditorBundle({
dom_id: "#swagger_editorInbox"
})
mySwagger = '....//my swagger// ...';
this.editorInbox.specActions.updateSpec(mySwagger);
}
}

Create 2 ids. you may need to do styling. very hard to do styling. I will recommend show only one at a time. Toggle content only
Id:
<div id="swagger_editorInbox1" style="height:500px"></div>
</div>
<div id="swagger_editorInbox2" style="height:500px"></div>
</div>
//JS
this.editorInbox = SwaggerEditorBundle({
dom_id: "#swagger_editorInbox1"
})
this.editorInbox = SwaggerEditorBundle({
dom_id: "#swagger_editorInbox2"
})

app.component.html
<div class="form-group">
<i class="fa fa-expand" (click)="showSwaggerModalFunction(); showSwaggerModal= 'true'" data-toggle="modal" data-target="#exampleModalCenter">
</i>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Swagger of </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" [hidden]="showSwaggerModal !== 'true'">
<div class="col-12">
<div id="swagger-editorInboxDummy" style="height:500px">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" (click)="onSaveModal()" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="row" style="border:solid 1px gray">
<div id="swagger-editorInbox" style="height:500px"></div>
</div>
</div>
app.component.ts
showSwaggerModal : string = 'false'
showSwaggerModalFunction(){
this.showSwaggerModal = 'true';
var editorInboxDummy = SwaggerEditorBundle({
dom_id : "#swagger-editorInboxDummy"
})
editorInboxDummy.specActions.updateSpec(mySwagger)
}
onSaveModal(){
this.showSwaggerModal = 'false';
}

How to prevent background scroll when bootstrap modal is open after that it should come to normal position

I am using this code for on load popup when popup opens the background should be not scrollable. Please help.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" >Open modal /button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document" style="width:340px;float:right;margin: 48px;">
<div class="triangle"></div>
<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>
<h2 class="modal-title" id="exampleModalLabel">Select City</h2>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<div class="col-md-3"> <label for="recipient-name" class="control-label">Recipient:</label></div>
<div class="col-md-9"><input type="text" style="border:1px solid gray;"></div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
<script>
$('#exampleModal').modal({
backdrop: 'static',
keyboard: true
})
</script>

I used as provided code and saw in codepan, there is no scroll
Please could you more elaborate your problem or provide all code.
codepen.

ASP MVC Passing value into modal window

I have this view with a modal window. When I click to open the modal window, I'd like to pass the parameter item.InstrumentId into the modal window so that I can click on a link that redirects me to the page from that specific instrument that belongs to the InstrumentId. What I'm doing below successfully passes the InstrumentId into the window, but the problem is I don't know how to pass that value into the Html.ActionLink. Any hints as to how I can proceed?
#foreach (var item in Model)
{
<li class="list-group-item">
<div class="row">
<div class="col-md-4">
<h4>
Instrument: #item.InstrumentId
</h4>
</div>
<div class="col-md-4">
#item.Type
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<button type="button" class="open-dialog btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id="#item.InstrumentId">
View details
</button>
<script type="text/javascript">
$(document).on("click", ".open-dialog", function() {
var modalId = $(this).data('id');
$(".modal-dialog #myModal").val(modalId);
})
</script>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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>
<h4 class="modal-title" id="myModal"></h4>
</div>
<div class="modal-body">
#item.Message
<br/> <br/> <br/>
<div class="row">
<div class="col-md-4">
Slide: 1234500323
</div>
<div class="col-md-4">
Instrument: #Html.ActionLink(item.InstrumentId, "Instrument", new {instrumentid = item.InstrumentId})
</div>
<div class="col-md-4">
Checked: #item.Checked
</div>
</div>
</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>
</div>
</div>
</div>
</li>
}
UPDATE
<div>
<ul class="list-group">
#foreach (var item in Model)
{
<li class="list-group-item">
<div class="row">
<div class="col-md-4">
<h4>
Instrument: #item.InstrumentId
</h4>
</div>
<div class="col-md-4">
#item.Type
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<button type="button" class="open-dialog btn btn-primary btn-sm" data-url="#Url.Action("Instrument", new {instrumentid = #item.InstrumentId})">
View details
</button>
<script type="text/javascript">
$(document).on("click", ".open-dialog", function() {
$('#details').attr('href', $(this).data('url')); // update the links url
});
</script>
</div>
</div>
</li>
}
</ul>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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>
</div>
<div class="modal-body">
#*#item.Message*#
<br /> <br /> <br />
<div class="row">
<div class="col-md-4">
Slide: 1234500323
</div>
<div class="col-md-4">
Instrument: <a id="details" href="#">Details</a>
</div>
<div class="col-md-4">
Checked: #*#item.Checked*#
</div>
</div>
</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>
</div>

You currently generating a modal for each item in your collection but giving it an id="myModal" which is invalid html and means data-target="#myModal" will only ever open the first one. Move the modal outside the loop so your create only one (and also remove the <h4 class="modal-title" id="myModal"></h4> element which also has the same id attribute)
Then change the button html to
<button type="button" class=".." .. data-url="#Url.Action("Instrument", new { instrumentid = item.InstrumentId })">
and change the html in the modal to
Instrument: <a id="details" href="#">Details</a>
Then change the script to
$(document).on("click", ".open-dialog", function() {
$('#details').attr('href', $(this).data('url')); // update the links url
})
Side note: You will probably want to do something similar with Checked: #item.Checked in the modal

1.Use ID for Anchor Link.
2.Notice this line <a href='#' id='InstrumentIDLink'>Anchor Link Value=</a> in code. It has Anchor Link Value=. When you open modal you can see Anchor Link Value=10320320 and you can inspect href too.
$('#myModal1').on('show.bs.modal', function(e) {
var modalId = $(e.relatedTarget).data('id');
$('#InstrumentIDLink').attr('href', 'url+'+ modalId)
$('#InstrumentIDLink').text('Anchor Link Value='+ modalId);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<h3>Modal Example</h3>
<!-- Button to trigger modal -->
<div> <a href="#myModal1" class='open-dialog' role="button"
class="btn" data-toggle="modal" data-id='10320320'>Launch Modal (10320320)</a><br/>
<a href="#myModal1" class='open-dialog' role="button"
class="btn" data-toggle="modal" data-id='10320321'>Launch Modal (10320321)</a>
</div>
<!-- Modal -->
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body"> <a href='#' id='InstrumentIDLink'>Anchor Link Value=</a>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
From bootstrap 3+ you can use e.relatedTarget to get element that triggered the modal

Instrument:
#Html.ActionLink("Link_Text", "Action_Name", "Controller_Name", new { id=item.InstrumentId})
Now in your COntroller you can access this value like
public ActionResult Action_Name(int id)
{
//Do something
return view();
}