We Keep Coding

copy a modal but change the text and images

I have a lot of modal on my site and I don't want to copy paste my code everytime just to change text and images.( all the rest of the modal stays the same).Would be appreciated if someone help me achieve that!
so I have this modaleTemplate i'd like to copy everytime, and then I want to change the following:
-modalImage1
-modalImage2
-modalImage3
-modalTitle
-modalText
<!----------------->
<!--- PROJECTS 1 -->
<!----------------->
<section class="section-full">
<div class="container-full">
<div class="portfolio logo" data-toggle="modal" data-target="#modalProject-1" id="project-1">
<div class="portfolio-wrapper">
<img src="img/portfolio/logo/5.jpg"/>
</div>
</div>
</div>
</section>
<!------------------->
<!-------- MODAL 1 -->
<!------------------->
<!-- Modal Project Template -->
<div class="modal fade" id="modalProject-1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!--modal body-->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<!--modal image-->
<div class="col-sm-6">
<img id="modalImage1"/>
<img id="modalImage2"/>
<img id="modalImage3"/>
</div>
<!--modal text-->
<div class="col-sm-6">
<h2 id="modalTitle"></h2>
<p id="modalText"></p>
</div>
</div>
</div>
</div><!--modal body-->
</div><!--modal-content-->
</div><!--modal-dialog-->
</div>
<!--------------------->
<!-- modal project 1 -->
<!--------------------->
<script>
$('#project-1').click(function(){
function setModal(modalImage1, modalImage2, modalImage3, modalTitle, modalText){
$('#modalImage1').attr('src','img/portfolio/logo/1.jpg');
$('#modalImage2').attr('src','img/portfolio/logo/2.jpg');
$('#modalImage3').attr('src','img/portfolio/logo/3.jpg');
$('#modalTitle').text('some title');
$('#modalText').text( 'some text' );
};
});
</script>

You can use jQuery (or vanilla javascript) to change the values of DOM when opening the modal.
Remove the <script> tags that you have placed in the modal give id (or class) to elements that you set the value to on the open-event.
To change src of an image in jQuery you can use $('#ID-of-img').attr('src','path-here');.
To change the text of a header or paragraph (or whatever) in jQuery you can use $('#ID-of-element').text('place text here');.
In your case I would use something like this.
<div class="col-sm-6">
<div class="spacer-sm hidden-sm-up"></div>
<h2 id="modalTitleDef"></h2>
<p><span id="modalText1Def"></span><br><br><span id="modalText2Def"></span></p>
<br>
<button type="button" class="btn btn-primary btn-md" data-dismiss="modal">Close Project</button>
</div>
</div>
</div>
<!-- project1 = COPY ALL modalTemplate but CHANGE the images and text-->
<script>
function setModal(modalImage1Def, modalImage2Def, modalImage3Def, modalTitle, modalText1, modalText2){
$('#modalImage1Def').attr('src',modalImage1Def);
$('#modalImage2Def').attr('src',modalImage2Def);
$('#modalImage3Def').attr('src',modalImage3Def);
$('#modalTitleDef').text(modalTitle);
$('#modalText1Def').text(modalText1);
$('#modalText2Def').text(modalText2);
}
</script>

It's a lot simpler than you may realize.
Especially when using the excellent Bootstrap modals, the modal is just a DIV structure that is initially hidden, and then displayed. It is styled using position:absolute or position:fixed to put it overtop of the page, and that adds to its mystique. But it is nothing more than a simple DIV structure.
So, how do you programmatically change the contents of a normal div? Usually, we use jQuery .html() -- and that's how you can have one modal structure and change the contents as desired.
Usually, you only need to have one modal structure on the page, and then every time you wish to display info in a modal you change the contents of that structure and re-display the updated modal.
Example:
$('#changeit').click(function(){
$('.modal-header').html('New header title');
$('.modal-body').html('\
<div class="col-xs-4">\
<img src="http://placeimg.com/200/150/animals" >\
</div>\
<div class="col-xs-8">\
Here is some new content. Here is some new content. Here is some new content. Here is some new content. Here is some new content. Here is some new content. Here is some new content. \
</div>');
alert('Modal has been changed. Click OPEN MODAL again to see');
//$('#btnOpenModal').click(); //This will force re-open the modal, if desired
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Trigger the modal with a button -->
<button id="btnOpenModal" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Simple Modal, from http://www.w3schools.com/bootstrap/bootstrap_modal.asp -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button id="changeit">Change Modal Contents</button>

Your situation is the exact example for using template, you have some HTML need to be rendered in different places and variables to change, Please check JavaScript templates

Twitter Bootstrap Modal change Content via Ajax

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 ?

How to pass and use URL in jQuery function and how to resolve the issue in closing the Bootstrap modal upon clicking close icon on modal?

I'm using Bootstrap v3.3.0 framework for my website:
I'm having following HTML :
View Receipt
I want to show the following modal dialog box when user clicks on the above hyperlink. While doing so I want to pass the image URL to the modal dialog and show the image in modal dialog. Following is the modal dialog:
<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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Rebate Receipt</h4>
</div>
<div class="modal-body" style="max-height: 420px; overflow: auto;">
<!-- Here I want to put image tag with image "src" from hidden field -->
</div>
</div>
</div>
</div>
Following is the function I wrote to achieve this but I couldn't make it:
<script>
function showreceipt(url) {
$('div #modal-body').html('<img class="img-responsive" src="url" style="text-align:center;">');
$('#myModal').modal('show');
}
</script>
Please guide me in passing the URL value to the above function and use it in img attribute into a modal dialog.
Also the modal is not getting close after clicking on close button. I don't know why this is happening.
Also when user closes the modal the img src field should get reset to "".
How to achieve this in my code?
Please help me in my attempt.

You can do something like this. I have created an example to show: http://www.bootply.com/rbIcW7Mao8
View Receipt
<input type="hidden" id="student_url" name="student_url" value="https://www.google.co.uk/logos/doodles/2014/wassily-kandinskys-148th-birthday-5655681428357120-hp.jpg">
Create your modal with an empty <img> in the body:
<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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Rebate Receipt</h4>
</div>
<div class="modal-body" style="max-height: 420px; overflow: auto;">
<img class="myImg img-responsive" src="" style="text-align:center;">
</div>
</div>
</div>
</div>
Then set the image when the modal pops open via jquery:
$(function(){
$('#myModal').on('hidden.bs.modal', function (e) {
$(".myImg").attr('src', "");
});
$('#myModal').on('show.bs.modal', function (e) {
$(".myImg").attr('src', $("#student_url").val());
});
});
These functions fire on the show and hidden events of the modal. One will set the image based on what is in the hidden <input> and one will clear the image.
In the example I created the modal seems to close fine. So not sure what the issue you are having there is.

I try to answer you. Excuse me if I did not understand you.
<a href="#" align="center" type="button" class="btn btn-danger"
data-toggle="modal"
data-target="#myModal" onclick="showreceipt('http://localhost/images/J12345_6946.jpg');">View Receipt</a>
<script>
function showreceipt(imgUrl) {
$('#myModal').modal('show');
$('#myModal #modal-body').html('<img class="img-responsive" />');
$('#myModal #modal-body .img-responsive').prop('src', url);
$('#myModal #modal-body .img-responsive').css('text-align', 'center');
return false;
}
</script>

How to use "nifty modals" to delete confirmation

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.

Jquery modal pop up with dynamic content

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.