I use this: http://tympanus.net/Development/ModalWindowEffects/
But the problem is, how to change standard modal to something like javascript confirm().
This is the HTML:
<!-- Modal -->
<div class="modal fade" id="mod-delete" 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">×</button>
</div>
<div class="modal-body">
<div class="text-center">
<div class="i-circle warning"><i class="fa fa-warning"></i></div>
<h4>Big warning!</h4>
<p>You are going to delete this item!</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" id="delete-yes" class="btn btn-warning" data-dismiss="modal">Continue</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
And this is the link that fires this event:
<a class="label label-danger delete-confirmation" data-toggle="modal" data-target="#mod-delete" href="{$base_url}user/delete/{$user.UserID}"><i class="fa fa-times"></i></a>
Then I do this:
// universal delete confirmation dialog
$('#delete-yes').on('click',function(){
window.location = $(".delete-confirmation").attr('href');
});
But! The selector $('.delete-confirmation') gets every item on the page (I'm deleting users from DB). I want confirm deletion of only one item that is clicked.
Simply: I click to delete user (this link has "href" atribute - contains delete-link). I see modal window, if I click to "Continue", I'll go to delete-link of this item.
Is there anyone who has this problem done?
I would suggest:
Pass the href value of the clicked link to the modal div, you can do it with something like this:
$('.delete-confirmation').on('click',function(){
$('#mod-delete').attr("nhref", $(this).attr("href));
});
Once you have passed the href value to the modal div, you can use:
$('#delete-yes').on('click',function(){
window.location = $("#mod-delete").attr('nhref');
});
Probably not the best solution, but it should work (probably some little changes to the code are needed, but the general idea works).
Hope this helps.
Related
I have a table where each row has a link to edit the data for that record. The link will be in the following format -> modal_edit.php?id=2
On clicking the link it should open the link in an iframe which is located inside a bootstrap-4 modal window.
I am not sure how to achieve this. I have tried searching for a solution but those did not help.
Here is my code for the link:
<td><center><i class="fas fa-edit"></i></center></td>
And code for modal:
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<iframe src="modal_edit.php" width="600" height="380" frameborder="0" allowtransparency="true"></iframe>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
I have also tried sending the link using data-id and updating the src but it didn't seem to work. I am fairly new to coding and any help in this regard will be appreciated.
<td>
<center><i class="fas fa-edit"></i></center>
</td>
$(document).ready(function() {
$(".showModal").click(function(e) {
e.preventDefault();
var url = $(this).attr("data-href");
$("#myModal iframe").attr("src", url);
$("#myModal").modal("show");
});
});
You can use set the src of an iframe on click of the a tag. Get the value from data-href , set the src of an iframe and then show the modal window.
How can I show a bootstrap modal in Meteor?
From http://meteorpedia.com/read/Modals I can read that the Meteor-way is to use template logic to show/hide the modal.
I have tried adding the modal in my template with
<div class="modal fade">
<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>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</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">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
and I have a variable showModal which determines whether the modal should be shown or not. But I don't know how to programmatically show/hide the modal.
Add an id to the modal
<div id="myModal" class="modal fade">
And use modal() to open the modal
$('#myModal').modal('show');
To close the modal
$('#myModal').modal('hide');
Docs
If you want to open the modal in Meteor way
In JS
Session.set('showModal', true); // Show modal
Session.set('showModal', false); // Hide modal
In Template
{{#if showModal}}
<div class="modal fade"> <!-- Use Display block to show the modal by default -->
...
{{/if}}
Make life easy on yourself and use a bootstrap meteor-modal package. I use this one and it works great meteor modal.
I know, here are many question with the same topic.
But I cannot find a solution for my prpblem.
So I have a layout and before the body tag closes there is the modal window:
<!-- 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">Modal title</h4>
</div>
<div class="modal-body">
CONTENT
</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>
</body>
I have a link in my site that toggles the modal window:
<a data-toggle="modal" class="btn btn-info" href="myRemote.php?id=1" data-target="#myModal">Click</a>
My remote php only contains "<php echo $_GET['id'];?>" for testing.
In the future there is content from a database.
So everytime I click on the link to the modal the content will change.
this is not the problem, I know how to do this in php etc.
And I write JS that the modal content should change:
$(document).ready(function() {
// Fill modal with content from link href
$("#myModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
})
the problem:
when I click the link the modal window opens. perfect.
But than the modal window dissappear and in the top position of my site there is the "1". But this is not so nice, because I only want that the content "CONTENT" in the modal-body should change to "1."
What I am doing wrong here?
And - another question. If I do this with changing content every time with the $_GET['id'] the 1 never dissappear, but I want changing the content dynamic here, so in this example there should be a "2" in the modal-body class of the modal window if I click on a link like this:
<a data-toggle="modal" class="btn btn-info" href="myRemote.php?id=2" data-target="#myModal">Click</a>
Can somebody help me please?
Make link like below:
<a class="btn btn-info openModal" data-href="myRemote.php?id=1">Click</a>
<a class="btn btn-info openModal" data-href="myRemote.php?id=1">Click 2</a>
On Js:
$(document).ready(function() {
// Fill modal with content from link href
$(".openModal").on("click", function(e) {
var link = $(this).data("href");
$('#myModal').modal("show");
$('#myModal .modal-body').load(link );
});
})
Can you try it ?
I am trying to implement a modal functionality with an application and I am bit stuck.
use case: On an user's dashboard they are bunch of links for the various applications. When user tries to access those link, a modal with terms and condition should pops and when the user accepts the condition then a new windows should open depending on the application link user selected. These links are dynamic and generated on UI based on database.
Non modal implementation:
<div class="col-xs-12" nopadding>
<ul class="nopadding padded-side-20">
<c:forEach var="app" items="${appAndLink}">
<li>${app.key}</li>
</c:forEach>
</ul>
</div>
Modal Implementation:
<c:forEach var="app" items="${appAndLink}">
<li>${app.key}</li>
</c:forEach>
<div class="modal fade" id="myModalAccessApp" tabindex="-1" role="dialog" aria-labelledby="myModalAccessAppLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header nopadding padded-side-20 padded-tb-10">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalAccessAppLabel">
Systems Use Notification
</h4>
</div>
<div class="row">
<div class="col-lg-12 gray-divider"></div>
</div>
<div class="modal-body" id ="modalID">
<p> Terms and condition </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" onclick="openJSWindow('${app.value}', '${app.key}', true)" data-dismiss="modal">
I Accept
</button>
<button type="button" class="btn btn-success"
data-dismiss="modal">Cancel
</button>
</div><!-- /.modal-footer -->
</div>
</div>
</div> <!-- /.modal-Ends -->
</ul>
</div>
I am not able to pass the ${app.value}, ${app.key} value to the modal which I have created. Kindly let me know if this can be done with jQuery or AJAX. I have very limited knowledge on these.
Thank you for the help.
I am working on someone script.I can t understand it clearly to implement my code.I need this content in modal pop up.
<div data-rel="close" data-role="panel" data-display="overlay" data-position="right" id="circle-more">
<div class="details-arrow">
<div class="boxscroll">
<div class="contentscroll circle-more-cont">
</div>
</div>
</div>
</div>
Actually now its taking data dynamically from db and hidden.It working fine but it shows in page.I want to show this entire content in modal.can anybody help me.I tried all options nothing work out.
it get contents from here
function circleMoreDetailsSocial(social_ring_obj_index, comment_details, cur_obj)
{
$(".circle-more-cont").html('');
if (nice) nice.remove();
var i = 1;
$.each(circleData4[social_ring_obj_index], function(social_value_index, social_value)
{
$.each(social_value, function(value_index, value)
{
if(value[1] == 'facebook')
social_media_link = "https://facebook.com/"+value[2];
// <div class='"+value_index+"' style='background-color:"+eval("color"+i)+"'> </div>
$(".circle-more-cont").append("<a href="+social_media_link+" onclick='javascript: void(0)' return false;' ><p>"+value[0]+"</p></a>");
i++;
});
});
$("#circle-more").panel('open');
nice = $(".boxscroll").niceScroll(".contentscroll",{cursorcolor:"#F00",cursoropacitymax:0.7,boxzoom:true,touchbehavior:true});
return false;
}
This make some sense i think.it dynamically add content from json file as pargraphs.so when i click a paragraph it will redirect to some links.I dont want to get redirected.instead of that i just want to wrap everything under modal so i can stay in same page.redirect will done only in modal.
please check demolink
Reference link http://getbootstrap.com/javascript/#modals
<!-- Button trigger modal -->
<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" 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>
<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>
use jqueryui dialog -modal ...https://jqueryui.com/dialog/
example:
html
<div id="dialog-modal" title="Basic modal dialog">
<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>
js:
$(function() {
$( "#dialog-modal" ).dialog({
height: 140,
modal: true
});
});
you can use jquery + jquery ui
the code
$(function(){
$( "#circle-more" ).dialog({
height: 140,
modal: true
});
});
this a demo
https://jqueryui.com/dialog/#modal
that's open the dialog at the start of the page.