Hey i can't figure this out. I have a script which generates my modals on the end of my site. Here two models which i generate:
<div class="modal fade" id="1_10_1" tabindex="-1" role="dialog" aria-labelledby="1_10_1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<table>
<tr>
<td>10</td>
<td>Margharita<br>Tomatensoße und Käse</td>
<td>6.5</td>
<form><input type="text" id="Anzahl" value="1"></form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">In den Warenkorb</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="1_12_1" tabindex="-1" role="dialog" aria-labelledby="1_12_1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<table>
<tr>
<td>12</td>
<td>Rindersalami<br></td>
<td>6.7</td>
<form><input type="text" id="Anzahl" value="1"></form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">In den Warenkorb</button>
</div>
</div>
</div>
</div>
Then i have a second script on the same site which creates the buttons for the modals in a table. Here my buttons for the above modal example.
Button for the first modal:
<button class="btn btn-success" data-toggle="modal" data-target="#1_10_1">6.5 €</button>
Button for the second modal:
<button class="btn btn-success" data-toggle="modal" data-target="#1_12_1">6.7 €</button>
When i now click the first button on my page a modal shows up with the content of both modals but only one close button. When i close this modal and than click the button of the second modal my screen outputs the .modal-backdrop but no modal and than it stays in this status. I have to refresh my site to continue. What i am doing wrong? Hope someone can help me.
You need to close your table and tr tags in both modals.
<table>
<tr>
<td>10</td>
<td>Margharita<br>Tomatensoße und Käse</td>
<td>6.5</td>
</tr> //MISSING
</table> //MISSING
Working example
http://www.bootply.com/93669
Related
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.
I have an Angular App and a custom Modal Dialog implementation. How can I limit the 'tabbablity' of the page so that i can just tab through the Modal, and not everything else in background?
I have set aria-hidden="true" for all other elements directly under the body tag, and thought that has to handle that, but no success. tabindex="-1" also did not work..
Actually I want the exact tab-behaviour of this bootstrap modal:
https://getbootstrap.com/docs/4.0/components/modal/
Click: "launch demo modal" and tab through the modal elements..
How can I achieve this?
Edit: I look at the bootstrap modal, and they do not set anything to other elements, but just to the modal container div (with class="modal fade show") tabindex="-1". And after the last element in modal, tab sets focus to this modal container div. After that the focus is set again to the first modal element. In my case tabindex="-1" strangely does not bring anything, after the last element focus jumps to the Browser's URL Input field and goes on.
I dont know what code you have...but this tabindex behavior works well with bootstarp example.
.modal-backdrop {
background-color: transparent !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal (with tab only on modal elements)
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
coucou
</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>
<br><br><br>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">
Launch demo modal (with tab on all document elements)
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal2" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
coucou
</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>
I have the standard bootstrap modal from http://getbootstrap.com/javascript/
HTML code :
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- 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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
Now the above modal works, as it pops up once the button is clicked.
But I have two radio boxes and I only want to open the modal once a user checked accept radio option and hits a button.
<form>
<div class="radio">
<label><input type="radio" name="xx" checked>Accept</label>
</div>
<div class="radio">
<label><input type="radio" name="xx">Reject</label>
</div>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
</form>
the problem with the above code is the modal will popup even if user has checked reject choice. I don't want that to happen.
You may want to drop back to procedurally triggering the modal to add conditions to the display of the modal.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- 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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
<form>
<div class="radio">
<label>
<input type="radio" name="xx" value=true checked>Accept</label>
</div>
<div class="radio">
<label>
<input type="radio" name="xx" value=false>Reject</label>
</div>
<!-- Drop the attributes that trigger the modal display -->
<button type="button" class="btn btn-primary btn-lg conditional-launch">Conditional Modal</button>
</form>
<script>
// Add this in to target the button and bind to the click event
$(".conditional-launch").click(
function(event) {
// Then get the currently selected radio button's value
var value = $("input[name=xx]:checked").val();
// Check the value to make sure you want to show the modal
if (value === 'true') {
$("#myModal").modal('show');
}
}
);
</script>
Here is a jsfiddle to check it out working: https://jsfiddle.net/z7b5krse/. The code here can be copy/pasted as long as you have jQuery and Bootstrap being loaded prior to the script block.
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.
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>