I use bootstrap and angular. Imagine a situation where I have a situation with a parent and a child.
Table component is parent
Modal component is child.
in Table component i want to click on edit button and open Modal ( child component )
In modal component i want to show bootstrap modal
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</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">
...
</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>
Here is problem because button trigger is on parent component....
How to open modal from parent data and show?
This is parent table component.
<tr *ngFor="let menu of allMenus | searchInput:searchTerm; let i=index">
<td>
<button (click)="toggleModal(menu)" class="btn btn-secondary mr-3"> Edit </button>
<button (click)="removeMenu(menu)" class="btn btn-secondary"> Remove </button>
</td>
</tr>
You can wrap your child component tag (selector) with a ng-container with a *ngIf checking a boolean value (displayChild), try this:
public displayChild: boolean = false;
onToggle(){
displayChild == false ? true : false;
}
<button (click)="onToggle()">Click!</button>
<ng-container *ngIf="displayChild">
<child-component></child-component>
</ng-container>
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>
These code works fine, but is repeating the same over and over, needs to refact.
The elements presented on page are Title and Description of all Modal. Rest
of functionality is the same. Css is default bootstrap, it can be the same
whithout any important change.
I added another Help button on the side of each primary button, to help
search some information about how to find the documentation on every element
inside the Modals. Is no needed to focus on that at the moment.
Lorem ipsum text, can be placed on the respective container to complete
the description, and title, feel free to do it by your own.
To test the code, link Bootstrap 4.0 js files on the page.
So some guide to refact here, will be apreciated. Thank you very much.
<!-- DESCRIPTION & HELP BUTTONS-->
<ul>
<li><a href="#">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-1" data-whatever="1. First Content">Title 1</button>
<button type="button" class="btn btn-secondary btn-circle">?<i></i></button>
</a></li>
</br>
<li><a href="#">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-2" data-whatever="2. First Content">Title 2</button>
<button type="button" class="btn btn-secondary btn-circle">?<i></i></button>
</a></li>
</ul>
</div>
</div>
<!-- END DESCRIPTION & HELP BUTTONS-->
<!-- MODAL's BODY DESCRIPTION -->
<div class="modal fade" id="example-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 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="exampleModalLabel">Title 1</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Some text Description 1</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Go to content</button>
</div>
</div>
</div>
</div>
<!-- END MODAL's BODY DESCRIPTION-->
<!-- MODAL's BODY DESCRIPTION -->
<div class="modal fade" id="example-2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 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="exampleModalLabel">Title 2</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Some text Description 2</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Go to content</button>
</div>
</div>
</div>
</div>
<!-- END MODAL's BODY DESCRIPTION-->
$('#example-1').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever')
} // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text(recipient)
modal.find('.modal-body p').text(recipient)
})
$('#example-2').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever')
} // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text(recipient)
modal.find('.modal-body p').text(recipient)
})
I created a single modal in which the information can be replaced according to the button that clicked it. To take care of a longer text for modal body part, I added a that contains the relevant text along with the button in the same li but keeping the same hidden. So on click of the modal lonk all the relevant values can be replaced using jquery like this.
<!-- DESCRIPTION & HELP BUTTONS-->
<ul>
<li><a href="#">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-1" data-whatever="1. First Content">Title 1</button>
<button type="button" class="btn btn-secondary btn-circle" title="Information regarding first modal or...">?<i></i></button>
<div id="1content" style="visibility: hidden;"> <p>Some text Description 1</p></div>
</a></li>
<li><a href="#">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-1" data-whatever="2. Second Content">Title 2</button>
<button type="button" class="btn btn-secondary btn-circle" title="Information regarding second modal or...">?<i></i></button>
<div id="2content" style="visibility: hidden;"> <p>Some text Description 2</p></div>
</a></li>
</ul>
<!-- END DESCRIPTION & HELP BUTTONS-->
<!-- MODAL's BODY DESCRIPTION -->
<div class="modal fade" id="example-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 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="exampleModalLabel">Title 1</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Go to content</button>
</div>
</div>
</div>
</div>
<!-- END MODAL's BODY DESCRIPTION-->
<script>
$('a[data-toggle=modal], button[data-toggle=modal]').click(function () {
var button = $(this); // Button that triggered the modal
var recipient = $(this).attr("data-whatever");
var modal = $("#example-1");
modal.find('.modal-title').text(recipient);
var div = $( "div" );
// if last() is not used, then it brings that information button's ? as well
var bodyText = $(this).siblings(div).last().text();
modal.find('.modal-body p').text(bodyText);
});
</script>
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'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>