I have an Angular Application. Created using SemanticUI (http://semantic-ui.com/). I use one modal to view some data and also there's a button in that modal to open another modal. When i open the second modal, it goes behind the first modal. I want to keep both modals. And I want to take the second modal to front. How can I do this ?
This is the code of first modal.
<div class="ui modal" id="viewMoreModal">
<i class="close icon"></i>
<div class="header">
Episodes of {{series.description}}
</div>
<div class="content">
<div class="ui grid">
<div class="floated right pointing west">
<button ng-click="openAddNewEpisodeModal()" class="ui purple button ">Add New Episode</button>
</div>
<div class="sixteen wide column">
<table class="ui very compact celled table">
<tr>
<th>Season</th>
<th>Episode</th>
<th>Alt. Episode Nr.</th>
<th>Title</th>
<th>Part</th>
<th>Duration</th>
<th>Release Date</th>
<th>Series</th>
<th>SubSeries</th>
<th>Tags</th>
</tr>
<tr ng-repeat="episode in episodes" onClick="HighLightTR(this,'#c9cc99','cc3333');">
<td>{{episode.data.season}}</td>
<td>{{episode.data.episode}}</td>
<td>{{episode.data["episode-alt"]}}</td>
<td>{{episode.data.title}}</td>
<td>{{episode.data.part}}</td>
<td>{{episode.data.duration | secondsToDateTime | date:'HH:mm:ss' }}</td>
<td>{{episode.data.date}}</td>
<td>{{episode.data.series}}</td>
<td>{{episode.data.subseries}}</td>
<td>
<a ng-repeat="sub_tag in episode.data.tags" class="ui mini orange tag label"><span>{{sub_tag}}</span></a>
</td>
</tr>
</table>
</div>
<div class="floated right pointing west">
<button ng-click="openAddNewEpisodeModal()" class="ui purple button ">Add New Episode</button>
</div>
</div>
</div>
</div>
And this is my second modal. This opens when user click on the "Add New Episode" button in first modal.
<div class="ui united modal" id="addNewEpisodeModal">
<i class="close icon"></i>
<div class="header">
Add New Episode
</div>
<div class="content">
</div>
</div>
Please tell me how to fix this issue.
This is how I open those models.
$scope.openAddNewEpisodeModal = function () {
$('#addNewEpisodeModal').modal('show');
};
Related
I want to get id of button click in the address bar to take relivent data from database like instagram did.
I want to get id from the adress bar using php to find the specific data from database according to the id of selected reference.
Note
The image below is the credit of #designer from post Stackoverflow Question.
My code snipest is:
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<a class="btn btn-primary btnModal" data-target ="#scrapModal" href="washingPlan.php#scrapModal?id=' . $row['id'] . '" data-toggle="modal" >Service Include</a>
<div class="modal fade bd-example-modal-lg" id="scrapModal" tabindex="-1" role="dialog" aria-labelledby="scrapModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">WASHING PLAN SERVICES</h6>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<input type="text" name="id" id="id" />
<thead>
<tr>
<th>S.No.</th>
<th>Washing plan Services</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>S.No.</th>
<th>Washing plan Services</th>
<th>Action</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>test</th>
<th>test1</th>
<th>test2</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<form action="" method="post">
<div class="col-lg-8 m-4">
<label class="ml-1">Plans Include</label><br>
<input type="text" id="plans" name="plans" placeholder="" class="col-12" required>
</div>
<div class="row m-5">
<input type="submit" value="Reset" class="btn" style="background-color: #FF9933;letter-spacing: 0.6px;border-radius: 2px;color: #FFF;">
<input type="submit" class="btn" name="includeService" value="Add Value" style="background-color: #0891FF;;letter-spacing: 0.6px;border-radius: 2px;color: #FFF; display: inline-block;vertical-align: middle;">
</div>
</form>
</div>
</div>
</div>
Its address didn't not changed when I add data-target=modal. Is there any technique to make a modal like this?
Thank you in advance
I'd say you're looking for the History API, which allows you to manipulate the browser history (including the URL bar) using JS.
history.pushState() allows you to 'add' a page to the history stack, which will change the URL to whatever you specify.
If you listen to the window.onpopstate event, you can detect when the user navigates history using the browser controls (such as the back button), interrupt it and handle it yourself, all without reloading the page!
That should be plenty to get you started, it's a very useful API to take advantage of.
semantic ui modal ptint using printjs library. but the result is not
correctly showing the expected modal print.
help ?
$(document).ready(function(){
$('#logIn').click(function(){
$('#modaldiv').modal('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.css" rel="stylesheet"/>
<div id="modaldiv" class="ui modal">
<button type="ui button" id="button" onclick="printJS({ printable:
'modaldiv',type: 'html',showModal:true, printContainer:
true,copyTagClasses: true})">
Print
</button> //print button and printjs command active
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="content">
<div class="ui medium image">
<img src="img/bmw5.png">
</div>
<div class="description">
<div class="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the <a href="#"
target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
</div>
<div class="actions">
<div class="ui black button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
<a class="item ui button" id="logIn">
<i class="user icon"></i> Log In
</a> // modal open login button
The issue printing this modal is not related to print.js. The modal has a negative margin-top applied style which is the cause of issue when printing it.
In this fiddle, you can test using the Print2 button, it will print another html element content inside the same modal, without any issues.
https://jsfiddle.net/crabbly/y8e4ga8p/
I have an app that display 5 div each containing a specific kind of data.
I would like to be able to show one of the div in a modal so that the user can see the data in bigger size.
This would be trigger by a button placed in the top right corner.
HTML
<div class="ui grid">
<div class="sixteen wide column center aligned">
IRM Website
</div>
<div class="sixteen wide column center aligned mediumBox"> <!-- DIV 1 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<map bassins="vm.bassins" dataset="pluviometre" ng-if="vm.bassins"></map>
</div>
<div class="four wide column smallBox"> <!-- DIV 2 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<img />
</div>
<div class="four wide column smallBox"> <!-- DIV 3 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<img />
</div>
<div class="four wide column smallBox"> <!-- DIV 4 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<map bassins="vm.bassins" ng-if="vm.bassins"></map>
</div>
<div class="four wide column smallBox"> <!-- DIV 5 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<map bassins="vm.bassins" ng-if="vm.bassins"></map>
</div>
</div>
<div class="ui modal"> <!-- The modal -->
<i class="close icon"></i>
<div class="header">Data in modal</div>
<div class="content">
Here is my content
</div>
</div>
The modal need this javascript to be shown
$('.ui.modal').modal('show');
The idea is that each button triggers a function inside my controller
vm.maximizeData = function(){
$('.ui.modal').modal('show');
}
But how can I display the correct div inside the modal ?
As your question says you want to show a data of particular clicked element into the modal dynamically.
Use a selector to have parent child for click function
Get the content of respective / closest / next DIV content that you want to show in modal as bigger data.
Set the modal content and then show it.
HTML
<div class="mainBox">
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content</div>
</div>
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content</div>
</div>
</div>
<div class="ui modal"> <!-- The modal -->
<i class="close icon"></i>
<div class="header">Data in modal</div>
<div class="content">
Here is my content
</div>
</div>
Jquery
$(document).ready(function(){
//Button click
$('.mainBox .smallBox .buttonAction').click(function(){
//Get content near to clicked button
var contentToSet = $(this).next('.divContent').html();
//Set the data to be shown in modal
$('.modal').find('.content').html(contentToSet);
//Make modal show
$('.modal').modal('show');
});
});
FYI, This is just an example, you may need to change variable names as per your need.
$(document).ready(function(){
//Button click
$('.buttonAction').click(function(){
//Get content near to clicked button
var contentToSet = $(this).next('div.divContent').html();
console.log(contentToSet);
//Set the data to be shown in modal
$('.modal').find('.content').html(contentToSet);
//Make modal show
//$('.modal').modal('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainBox">
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content1</div>
</div>
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content2</div>
</div>
</div>
<div class="ui modal"> <!-- The modal -->
<i class="close icon"></i>
<div class="header">Data in modal</div>
<div class="content">
Here is my content
</div>
</div>
I use Foundation 6 and the close button http://foundation.zurb.com/sites/docs/close-button.html
inside jQuery Reveal Modal Plugin http://foundation.zurb.com/sites/docs/reveal.html .
When i click on the close button of the table row, the whole modal will close, too.
How can i make the close button remove only the table row without closing the modal?
My HTML:
[![<div class="reveal" id="wishlist" data-reveal>
<p class="lead">Ihre Wunschliste</p>
<div class="wishlist">
<div data-hook="cart_container">
<table class="stack articles">
<thead></thead>
<tbody>
<tr class="callout" data-closable>
<td>CHF 199.00
<div class="nile-close-button">
<span class="close-button" aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">×
<div class="close-button-text">entfernen</div>
</span>
</span>
</div>
</td>
</tr>
<tr class="callout" data-closable>
<td>CHF 179.00
<div class="nile-close-button">
<span class="close-button" aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">×
<div class="close-button-text">entfernen</div>
</span>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>][1]][1]
It doesn't seem possible to override data-close handling in Foundation. So I ended up with removing Foundation's Close Button and make one myself.
I try to make a form validation, but if I hit submit, the form disapears before giving me the feedback:
<div class="ui right aligned grid">
<div class="ui three wide column">
<div class="ui center aligned inverted orange segment">
<div class="ui animated fade large inverted button" onclick="contact()">
<div class="visible content">Say Something!</div>
<div class="hidden content">Express yourself ;)</div>
</div>
</div>
</div>
</div>
<div class="ui first coupled modal">
<i class="close icon"></i>
<div class="header">
tell me something
</div>
<div class="content">
<form class="ui form" method="post" action="/msg">
<h4 class="ui dividing header">What do you think</h4>
<div class="field">
<label><i class="write icon"></i></label>
<textarea name="txt" class="field" placeholder="write something" required></textarea>
<input class="ui green button" type="submit" value="gtt"/>
</form>
</div>
</div>
</div>
<div class="ui small second coupled modal">
<div class="header">
<i class="red heart icon"></i>
</div>
<div class="content">
<div class="description">
<h1>Thank you</h1>
</div>
</div>
<div class="actions">
<div class="ui approve inverted blue button">
<i class="checkmark icon"></i>
Bye ^_^
</div>
</div>
The JS:
function contact(){
$('.coupled.modal')
.modal({
allowMultiple: false
})
;
// attach events to buttons
$('.second.modal')
.modal('attach events', '.first.modal .button')
;
// show first now
$('.first.modal')
.modal('show')
;
}
And here is how the first windows diseapears without letting me validate.
Update: I added the validation, but it doesent work:
$('.ui.form')
.form({
message: {
identifier : 'msg',
rules: [
{
type : 'empty',
prompt : 'Please enter a message'
}
]
},
})
;
Where are the onApprove and onDeny callbacks to perform the logic?
The fact that the modal fades but that the dimmer stays on the screen suggests an error in the js. Go to the debugger and find out.