I have modal pop up and in that modal popup i want to have one more modal popup(smaller modal).My code is as follows
Click event for 1st modal
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
My Modal
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
I want to show my 2nd popup modal after clicking on Agree button my 2nd modal is as follows.
<!-- Modal Structure -->
<div id="modal2" class="modal">
<div class="modal-content">
<p>Thank you</p>
</div>
</div>
When i open my 1st pop up i am unable to open 2nd popup. How can i achive popup modal on popup modal using materialize UI?
Related
Hi i m beginner i m creating a project in that project i have to display array data using *ngFor in div. my issue is that when i clicked view details button then one modal dialog box will open in that modal box only first image is showing in all divs on click details button, how can display their related image only in their modal box
Html
<div class="container-fluid">
<div class="menuItem" *ngFor="let items of menuItems;let i=index">
<img src="../../../assets/{{items.image}}" alt=""height="200px" width="40%" >
<div class="menumod1">
<div class="odrnow1">
<h3 >{{items.dishName}}</h3> <h4>{{items.price}}</h4>
<button>Order Now</button>
</div>
<div class="ordlist">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">View Details </button>
<button class="btn btn-primary">Add To Order List</button>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal body -->
<div class="modal-body">
<img src="../../../assets/{{items.image}}" height="500px" width="700px" alt="">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
**ts**
export class MenuComponent implements OnInit {
menuItems:any=[
{ 'id':1,'image':'chickenLalima.jpg','alt':'alt','price':200,'dishName':'Chicken Lalima'},
{ 'id':2,'image':'homebiryani.jpg','alt':'alt','price':150,'dishName':'Saamey Biryani'},
{ 'id':3,'image':'muttonLalima.jpg','alt':'alt','price':350,'dishName':'Mutton Lali'},
{ 'id':4,'image':'muttonsaamey.jpg','alt':'alt','price':320,'dishName':'Mutton Saamey'},
]
constructor() { }
ngOnInit(): void {
}
}
In my app, I display a list of items which have extra information (which isn't displayed) and a button next to each item to 'View' more info. I want to display that extra information inside a modal. I successfully implemented the modal and it displays the information the way I want it to.
But the problem is that when I click the button of the second list item, the information isn't being updated, it still displays old information (of the first item). How do I resolve this? Why does this happen?
Calling a map function from another class :
<List>
this.props.enrolledClasses.map(enrolledClass => (
<ClassesPeek
title="Overview"
enrolledClass={enrolledClass}
/>
</List>
ClassesPeek :
<List.Item>
<span>{this.props.enrolledClass.name}
<button type="button" className="ui compact primary button mt-3" data-toggle="modal" data-target="#details">
View
</button>
<div class="modal" id="details">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<center><h4 class="modal-title">{this.props.enrolledClass.name}</h4></center>
<button type="button" className="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
{this.props.enrolledClass.description}
</div>
</div>
</div>
</div>
</span>
</List.Item>
So in the above code, when I click the 'View' button for the second list item, the modal still shows the name and description of the first item.
It will always show the old one because you didn't specify which one it should view by passing a unique key (id) to the modal. Update your code to the below snippet then it would work as expected
<List.Item>
<span>{this.props.enrolledClass.name}
<button type="button" className="ui compact primary button mt-3" data-toggle="modal" data-target={`#details${this.props.enrolledClass.id}`} id={`#details${this.props.enrolledClass.id}`}>
View
</button>
<div class="modal" id={`details${this.props.enrolledClass.id}`}>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<center><h4 class="modal-title">{this.props.enrolledClass.name}</h4></center>
<button type="button" className="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
{this.props.enrolledClass.description}
</div>
</div>
</div>
</div>
</span>
</List.Item>
I think the main reason for such scenario is your JavaScript code that opens the modal onthe button click. Can you please check that once. I would suggest always use ref for such usecase instead of id.
I have a requirement as, Creating a one form and load this form on multiple screen as modal using bootstrap.
Example : Suppose I am having 3 jsp pages i.e. Index.jsp, Request.JSP, Form.jsp
Now I have a link on Index.jsp which will display Form.jsp as Modal and I have button on Request.jsp, on click of button Form.jsp will get displayed as modal.
I have gone through multiple queries but solution was not satisfactory. I dont want to repeat the code and want to use Modal.
Thanks in advance.
i got the solution. I kept the Modal and Modal-dialog class div tags in main JSP like below :
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Cash Request Form</h4>
</div>
<div id="loadModalBody" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Then I added the form with modal-body class in second JSP CashRequestForm.jsp :
<div class="modal-body panel">
<div class="panel panel-body" id="panelActTypeAndDate">
<div class="row">
<div class="col-md-8"><font>Activity Type</font></div>
<div class="col-md-3"><font>Select Activity Date</font></div>
</div>
<div id="row1" class="row">
.....
.....
Your code
</div>
</div>
</div>
Then I called .load using jquery as below :
$(".popUp").click(function () {
$("#loadModalBody").load("CashRequestForm.jsp");
});
And it worked for me.
The bellow modal is inside a ng-controller="myController as SignupCtrl"
<div id="modalSignup" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" ng-click="SignupCtrl.resetForm()">
X
</button>
</div>
<div class="modal-body">
<form name="formSignup" novalidate>
<button type="submit" ng-click="LoginCtrl.signup();">
submit
</button>
</form>
</div>
</div>
</div>
</div>
I'm also using ui-router in my project.
How do I write the controller to close the modal and change state after success on LoginCtrl.signup() ?
You have to use Bootstrap's JS methods to close the modal manually.
But you are mixing jQuery and AngularJS. You should use a 3rd party library to do this.
See UI Bootstrap.
I have an index.html page that has a link on it that displays modal dialog when clicked.
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>Modal sample text</p>
</div>
<div class="modal-footer">
Close
</div>
</div>
Also index page displays partial pages inside a ui-view:
<div class="" ui-view>
</div>
The link that opens the modal is on the index page in the , so it is visible on any page. The problem I am having is when Close button is clicked, the modal dialog closes but then the user is taken to the login page.
This is happening because href="#". In order for it to be taken the a page should be something like #/page1. So it has to be set dynamically as the user navigates through the site. I can't seem to figure out a way to do that. Can anyone help?
The page url is something like this:
http://localhost:77777/index.html#/page1
So I'd need to capture the page it is on and assign it to href property dynamically. How could I do that?
Why don't you use a button and ng-click?
something like:
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>Modal sample text</p>
</div>
<div class="modal-footer">
<button ng-click="closeModal()" class="modal-action modal-close waves-effect waves-green btn-flat">Close</button>
</div>
</div>
And on the controller:
$scope.closeModal = function(){
//your code to close the modal window
}
Hope it helps