We Keep Coding

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.

When I click a button in navbar or other button it redirects me to a page called undefined but what I want to do is open a bootstrap modal

When I click a button in navbar or other button it redirects me to a page called undefined but what I want to do is to open a bootstrap modal
Explaining a little bit more I created a button on the page and when I put the <a> element inside the button it redirects to undefined page and I don't even have a href reference in there.
<!--button-->
<button class="au-btn au-btn-icon au-btn--blue">
<a data-toggle="modal" data-target="#uploadModal"><i class="zmdi zmdi-plus"></i>Adicionar Item</a>
</button>
<!--Modal-->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myMediulModalLabel">
<div class="modal-dialog modal-md">
<div style="color:white;background-color:#008CBA" 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 style="color:white" class="modal-title" id="myModalLabel">Upload Items</h2>
</div>
<div class="modal-body">
<form enctype="multipart/form-data" method="post" action="additems.php">
<fieldset>
<p>Name of Item:</p>
<div class="form-group">
<input class="form-control" placeholder="Name of Item" name="item_name" type="text" required>
</div>
<p>Price:</p>
<div class="form-group">
<input id="priceinput" class="form-control" placeholder="Price" name="item_price" type="text" required>
</div>
<p>Choose Image:</p>
<div class="form-group">
<input class="form-control" type="file" name="item_image" accept="image/*" required/>
</div>
</fieldset>
</div>
<div class="modal-footer">
<button class="btn btn-success btn-md" name="item_save">Save</button>
<button type="button" class="btn btn-danger btn-md" data-dismiss="modal">Cancel</button>
</form>
</div>
</div>
</div>
</div>

Why do you need anchor inside button . This is the reason its not working
:-
simply replace
<button class="au-btn au-btn-icon au-btn--blue">
<a data-toggle="modal" data-target="#uploadModal"><i class="zmdi zmdi-plus"></i>Adicionar Item</a></button>
with
<button class="au-btn au-btn-icon au-btn--blue" data-toggle="modal" data-target="#uploadModal">
<i class="zmdi zmdi-plus"></i>Adicionar Item</button>

Bootstrap modal fails to load content

I have two tabs in a page, both tabs contain a modal class. Modal in the first tab works fine, i.e. it fades-in and loads the content.However, when I switch to the next tab it only fades-in and doesn't show the content when I used chrome debugger I found in the first tab is comming while in second tab is comming
<button type="button"
class="btn btn-info glyphicon glyphicon-plus"
data-toggle="modal"
data-target="#myModal{{$parent.$parent.$index}}{{$index}}">
Add URL
</button>
{{category.name}}{{$parent.$parent.$index}}{{$index}}
<div class="modal fade" id="myModal{{$parent.$parent.$index}}{{$index}}" role="dialog">
{{$parent.$parent.$index}} -- {{$index}}
<div class="modal-dialog" role="document">
<!-- Modal content-->
<div class="modal-content" >{{category.name}}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<p>
<input type="text" class="form-control"
name="uri" placeholder="Add URL" ng-model="uri">
</p>
</form>
</div>
<div class="modal-footer">
<button type="button" ng-click="addCustom()"
class="btn btn-success btn-sm col-lg-2 col-md-offset-3 glyphicon glyphicon-ok"
data-dismiss="modal">Add</button>
<button type="button"
class="btn btn-success btn-sm col-lg-2 col-md-offset-7 pull-centre glyphicon glyphicon-remove"
data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>

Boostrap modal showing popup content on page before clicking on modal button

Trying to make this modal work on the checkout page here: http://designatwork.net/c3/checkout/ under the "Have a Physician Code? Enter your Physician Code" link at the top. When I put the modal code in, it shows the content that's supposed to be in the popup below the link that's supposed to open the popup. How do I get this to work properly?
<p>Don't have a Physician Code? <a data-toggle="modal" data-target="#physcode">Get one here!</a></p>
<!-- Physician Code Modal -->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>AQ Skin Pro products are available exclusively through participating clinics and physicians offices. If you do not have an Exclusive Physician Code, click "generate a code" below.</p>
<button class="nm-simple-add-to-cart-button single_add_to_cart_button button alt" data-dismiss="modal" aria-label="Close">Generate a Code</button>
</div>
</div>
</div>

You need to wrap your modal content within the a <div class="modal fade"></div> and have the role="dialog" attribute to that wrapper as following :
The modal html goes like this:
<div class="modal fade" id="physcode" tabindex="-1" role="dialog" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Physician Code</h4>
</div>
<div class="modal-body">
<p>AQ Skin Pro products are available exclusively through participating clinics and physicians offices. If you do not have an Exclusive Physician Code, click "generate a code" below.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And the trigger element looks like this:
<p>Don't have a Physician Code?
<!-- Button trigger modal -->
<a data-toggle="modal" data-target="#physcode">Get one here!</a>
</p>

You need to wrap the entire thing in a modal div, also there you need to set the id of it to the element that the button uses. Try this code:
<p>Don't have a Physician Code? <a data-toggle="modal" data-target="#physcode">Get one here!</a></p>
<div class="modal" id="physcode">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Physician Code</h4>
</div>
<div class="modal-body">
<p>AQ Skin Pro products are available exclusively through participating clinics and physicians offices. If you do not have an Exclusive Physician Code, click "generate a code" below.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Or pulled directly from my website, I use jQuery to open the modal automatically, but a button still works to open it.
<div class="modal" id="modalLogin">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="formLogin" method="post" action="./index.php">
<fieldset>
<div class="form-group">
<label for="inputUsername" class="col-lg-2 control-label">Username</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputUsername" name="inputUsername" data-validation="alphanumeric length required" data-validation-allowing="-_" placeholder="User">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" name="inputPassword" data-validation="strength required" data-validation-strength="3" placeholder="Password">
<span class="help-block">Forgot My Password</span>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<a type="button" href="./index.php" class="btn btn-default">Cancel</a>
<button type="submit" class="btn btn-default" form="formLogin">Login</button>
</div>
</div>
</div>
</div>

How to make a popup onClick with hability to enter text inside and send the content to another page?

I'm using Bootstrap CSS and I have a form with glyphicons next to each person.
Like that :
I would like when I click on the Tag glyphicons it popups something like that :
The visitor write something inside it and press OK then it goes to another page for UPDATE the note from Alexis.
How can we do a similar popups and when pressing OK it is like an OK ?

You can Try something like this:
Click this link for more details: -
http://www.bootply.com/X4oaJWOzOi
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-trash">LName FNmae</span>
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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="myModalLabel">Note</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>