While this question has been asked a few times before, none of the answers have seem to help me. Thus I am asking it again...
I am building the front end of a web site that has no back end (no server calls, etc.). I have a modal that displays content, with a next and a close button. My original design has it that when the next button is pressed, it closes the open modal and opens up a new one with different content. I think this looks unprofessional. I would like it where when a user presses the next button, it takes the content of the next modal and displays it on the open one, without having to keep opening and closing modals. However, I don't know exactly how do this. I'm assuming this is accomplishable with jQuery and AJAX. I will attach my code. Any Feedback is appreciated.
This is the open modal. When the user hits next I would like the content of <h4 class="modal-title> and the <div class="modal-body> to be replaced with the next modal.
<div class="modal fade protein-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <!-- PROTEIN MODAL START-->
<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"> Lean Protien </h4><!--CHANGE THIS WITH NEXT MODAL-->
</div>
<div class="modal-body"><!--CHANGE THIS WITH NEXT MODAL-->
<p>
At every meal, divide your plate into three equal sections. On one-third of the plate put some low-fat protein that is no larger or thicker than the palm of your hand (that’s because some hands are larger than others).
</p>
<p>
This doesn’t have to be animal protein, but it has to be protein-rich. For vegans this means either extra-firm tofu or soy imitation-meat products. For lacto-ovo vegetarians, it can also include dairy and egg protein-rich sources in addition to vegan sources of protein. For omnivores, the choice of proteins is even wider.
</p>
<div class="modal-image">
<img src="img/1-3plate1.png"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary zero-border" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success zero-border btn-next-slide-1" data-dismiss="modal">Next</button>
</div>
</div>
</div>
</div> <!-- PROTEIN MODAL END-->
The h4, and div should be replaced with the h4 and div of this modal
<div class="modal fade colorful-culinary-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <!-- COLORFUL-CULINARY MODAL START-->
<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">Colorful Carbohydrates</h4>
</div>
<div class="modal-body">
<p>
Next, fill the other two-thirds of your plate with colorful carbohydrates, primarily non-starchy vegetables and small amounts of fruits to balance the protein as shown below.
</p>
<p>
Here are two very practical hints when it comes to carbohydrates. First, the more white (white bread, white pasta, white rice, and white potatoes) you put on your plate, the more inflammation you are going to create. Second, the more non-starchy vegetables you consume and the fewer grains and starches you eat (ideally none), the better the results. Scientifically, it’s called lowering the glycemic load of the meal.
</p>
<div class="modal-image">
<img src="img/2-3plate1-1.png"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary zero-border" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success zero-border btn-next-slide-2" data-dismiss="modal">Next</button>
</div>
</div>
</div>
</div> <!-- COLORFUL-CULINARY MODAL END-->
Currently, I'm just opening and closing modals, which gets redundant. It would be way more efficient to simply replace the text.
$(document).ready(function()
{
$('.colorful-culinary-button').click(function()
{
$('.colorful-culinary-modal').modal('show');
});
$('.protein-button').click(function()
{
$('.protein-modal').modal('show');
});
$('.fat-button').click(function()
{
$('.fat-modal').modal('show');
});
$('.btn-next-slide-1').click(function()
{
$('.colorful-culinary-modal').modal('show');
});
$('.btn-next-slide-2').click(function()
{
$('.fat-modal').modal('show');
});
$('.diet-builder-button').click(function()
{
$('.diet-builder-modal').modal('show');
});
});
You can do follow this example in order to make it (needs to be adapted to your code, but the idea should work).
HTML (modal):
<div id="container">
<p>this is the first text in the modal</p>
</div>
<input id="nextBtn" type="button" value="NEXT"/>
jQuery:
$(document).ready(function() {
var objPos = 1;
var ajaxReturnObj = ["this is the first text in the modal","this is the second text in the modal","this is the third text in the modal"];
$('#nextBtn').click(function(){
$('#container p').text(ajaxReturnObj[objPos]);
objPos++;
});
});
http://fiddle.jshell.net/tv4zwpn0/2/
If you have a static page and want to change the content whithout closing the modal dialog on the next button you need to have the content stored in your file, statically.
I propose the following solution:
var eleToDisplay = ["next1", "next2"];
var indexOfEles = 0;
$('#btn').click(function () {
$("#dialog").dialog({
title: "Change text on Next without closing ",
resize: "auto",
modal: true,
buttons: {
"Next": function() {
$(this).html($('#' + eleToDisplay[indexOfEles]).html());
indexOfEles = ((indexOfEles + 1) >= eleToDisplay.length) ? 0 : indexOfEles + 1;
},
Close: function() {
$(this).dialog( "close" );
}
},
open: function() {
$(this).html($('#' + eleToDisplay[indexOfEles]).html());
indexOfEles = ((indexOfEles + 1) >= eleToDisplay.length) ? 0 : indexOfEles + 1;
$(this).parent().find('.ui-button:last').focus();
}
});
});
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
<link href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<!-- Skeleton of default dialog -->
<div id="dialog" title="Basic dialog">
<p></p>
</div>
<!-- The first dialog content -->
<div id="next1" style="display:none">
<p>
At every meal, divide your plate into three equal sections. On one-third of the plate put some low-fat protein that is no larger or thicker than the palm of your hand (that’s because some hands are larger than others).
</p>
<p>
This doesn’t have to be animal protein, but it has to be protein-rich. For vegans this means either extra-firm tofu or soy imitation-meat products. For lacto-ovo vegetarians, it can also include dairy and egg protein-rich sources in addition to vegan sources of protein. For omnivores, the choice of proteins is even wider.
</p>
<div class="modal-image">
<img src="img/1-3plate1.png"/>
</div>
</div>
<!-- The second dialog content -->
<div id="next2" style="display:none">
<p>
Next, fill the other two-thirds of your plate with colorful carbohydrates, primarily non-starchy vegetables and small amounts of fruits to balance the protein as shown below.
</p>
<p>
Here are two very practical hints when it comes to carbohydrates. First, the more white (white bread, white pasta, white rice, and white potatoes) you put on your plate, the more inflammation you are going to create. Second, the more non-starchy vegetables you consume and the fewer grains and starches you eat (ideally none), the better the results. Scientifically, it’s called lowering the glycemic load of the meal.
</p>
<div class="modal-image">
<img src="img/2-3plate1-1.png"/>
</div>
</div>
<button id='btn'>Click me</button>
Related
I have a piece of code that will create a contextual menu on right-click on one input in my page. The code is supposed to add "{Keyword: }" to the input. The problem is when I add the JS below all the modals that I use stop working (not displaying). The modals are activated by a button click.
Contexctual menu HTML:
<div id='cntnr'>
<ul id='items'>
<li>{Keyword:fallback}</li>
<li>{KeyWord:fallback}</li>
</ul>
</div>
Contexctual menu JS:
$("#headline11").on("contextmenu",function(e){
e.preventDefault();
$("#cntnr").css({"left": e.pageX-3, "top": e.pageY-3});
$("#cntnr").fadeIn(200, startFocusOut);
});
function startFocusOut(){
$(document).on("click",function(){
$("#cntnr").hide();
$(document).off("click");
});
}
$("#items > li").click(function(){
$("#headline11").val($(this).text().replace("fallback", " "));
var input1 = document.getElementById("headline11");
setInputSelection(input1, 9, 10);
});
Button:
<button onclick="load();setTimeout(myFunction, 10)" class="myBtn1" data-toggle="modal" data-target="#build">1 - Create campaign</button>
The modal:
<div class="container">
<!-- Modal Preview-->
<div class="modal fade" id="build" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h4 class="modal-title">Your Campaign Preview1</h4>
</div>
<div class="modal-body">
<div id="hoursSaved"></div>
Some text here.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
When I use {Keyword: Whatever here} in my input and submit, the modals stop working, but when I remove the JS above everything works, except the contextual menu of course.
It took me hours to debug my code and find what part of it is causing the problem, but I'm unable to understand why. Your help will be much appreciated.
Thank you,
EDIT: Here is a JsFiddle as requested in the comments. You'll have to run the code between each test to see the difference.
https://jsfiddle.net/yagami889/xpvt214o/470697/
You'll have to use the contextual menu to add the {Keyword:} you can enter whatever you want after ":", it won't work if you past it.
I found the answer. I had to use:
function startFocusOut(){
$("#cntnr").on("click",function(){
$("#cntnr").hide();
$("#cntnr").off("click");
});
}
Instead of:
function startFocusOut(){
$(document).on("click",function(){
$("#cntnr").hide();
$(document).off("click");
});
}
I have a few hidden modals on a page that I want to control with a single block of javascript code.
I'm trying to test to see if I'm getting the correct close button with class close, but my console.log is currently printing -1.
HTML
<span class="open">Button A</span>
<span class="open">Button B</span>
<!--modal-->
<div class="modal">
<!--modal content-->
<div class="modal-content">
<!--close button-->
<span class="close">×</span>
<!--content A-->
</div>
</div>
<!--modal-->
<div class="modal">
<!--modal content-->
<div class="modal-content">
<!--close button-->
<span class="close">×</span>
<!--content B-->
</div>
</div>
JS
$(document).ready( function() {
//when a class '.open' is clicked
$('.open').click(function(){
//store the index of the clicked span in a variable
var indexer = $('.open').index(this);
//test output - working
console.log("open. " + indexer);
//store all classes '.close' in a variable
var close = $('.close');
//store '.close' with same index as clicked button
var closeindex = $('.close').index(indexer);
console.log(closeindex);
});
});
I'm trying to walk through this click function and assign each class with the correct index to a variable, and I'm using console.log to print the indexes to the console.
With console.log(closeindex), I'm trying to get the index of the close button that has a matching index of span .open that was clicked, but currently it's returning -1.
I want to eventually do something like:
close.click = function() {
$('.modal').index(indexer).style.display = "none";
}
var closeindex = $('.close').eq(indexer);
Ok, so if you have a relationship between open and close such that the 3rd open related to the 3rd close, then you can get the related close by using the eq() method as above.
eq() will get you the element at that index, keeping it as a jQuery object.
If you're trying to open and close modal dialogs based on the buttons, I'd like to suggest an alternative method to indexes. With indexes, any refactoring/reordering of your elements is liable to throwing your code off entirely.
Consider using data attributes to keep track of what modal each open button is referring to. That way, no matter where your button/modals are, they are permanently linked.
If you give each modal an ID, and then add that ID to a data attribute on your open button...
<span class="open" data-modal="modal1">Open Modal 1</span>
<div class="modal" id="modal1"></div>
...then you can easily relate open buttons to their proper modals.
The close buttons can simply say "Close my parent modal" when clicked. We can do this using .closest( selector ) which traverses upwards in the DOM to find the first matching ancestor.
Working Example:
$(".open").on("click", function() {
$(".modal").hide(); //Hide all open modals
var modalId = $(this).data("modal"); //Get the Modal ID from the data-modal attribute
var $modal = $("#" + modalId); //Select the modal with that ID
$modal.show(); //Show it
});
$(".close").on("click", function() {
$(this).closest(".modal").hide(); //Close the closest modal (ancestry-wise)
});
div.modal {
display: none;
padding: 50px;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="open" data-modal="modal1">Button A</span>
<span class="open" data-modal="modal2">Button B</span>
<!--modal-->
<div class="modal" id="modal1">
<!--modal content-->
<div class="modal-content">
I'm modal 1!
<!--close button-->
<span class="close">×</span>
<!--content A-->
</div>
</div>
<!--modal-->
<div class="modal" id="modal2">
<!--modal content-->
<div class="modal-content">
I'm modal 2!
<!--close button-->
<span class="close">×</span>
<!--content B-->
</div>
</div>
<!-- -->
I am using this modal:
<div id="myalertbox" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal">×</button>
You have a new notification!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
Which pops up and says "You have a new notification!". I pop it up by using this script:
<script>
function showAlert() {
$("#myalertbox").modal({
"backdrop": "static",
"keyboard": true,
"show": true,
});
}
</script>
I dont know how to change the text inside though? I tried with .text and .html but it doesn't work.
Change text before calling the modal as
$("#myalertbox .modal-body").text('pass your text here');
Before initiating the modal, you can change its html like:
$("#myalertbox .modal-body").html('pass your html here');
// It will put your html inside the div having Class .modal-body which is enclosed with a div having ID #myalertbox
and after that initiate its modal as usual way.
As the content is not nested into any tags.
It's better to use this one below.
var btnHtml='< button type="button" class="close" data-dismiss="modal">
× ;< /button>';
$('#myalertbox .modal-body').html(btnHtml +"your text here");
plz help me(beginner) to solve a problem.
I am coding a site with bootstrap 3. I have bootstrap thumbnail on it.
when user will click an specific link in the thumbnail, it will show in an modal/popup.
modals primary contents will be same with the thumbnail was clicked.
but there will be two button (next, previous) in the modal, by clicking them, user will view the next or previous thumbnail.
There is an large image on each thumbnail which is hidden in thumbnail view, but will show in the modal view.
by clicking next or previous buttons, the large image, n the description part will change accordingly(like carousel).
The whole functionality is like lightbox. I have seen different jquery lightbox plugin, but either they are only with image preview,
or heavy weight. Plz help me with the issue. I know the html/css well. so, i can fix any css issue, i need the jquery functionality.
Please don't answer with just a lightbox plugin link, i want to use the basic jquery.
Here's the thumbnails in my html:
<div class="container" id="lightbox">
<div class="row">
<div class="lightbox-thumbs-wrap">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<div class="tmb-outer">
<div class="tmb-gray">
<img src="img/xyz/small-icon.png">
<h3>Description heading</h3>
<p>
Description details here.
</p>
</div>
<a class="tmb-button">Click to open lightbox</a>
<img src="img/xyz/large-image1.png"> <!-- this image hidden in thumbnail, but will show only in modal -->
</div>
</div>
</div> <!-- ********* end thumb *********** -->
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<div class="tmb-outer">
<div class="tmb-gray">
<img src="img/xyz/small-icon2.png">
<h3>Description heading2</h3>
<p>
Description2 details here.
</p>
</div>
<a class="tmb-button">Click to open lightbox</a>
<img src="img/xyz/large-image2.png"> <!-- this image hidden in thumbnail, but will show only in modal -->
</div>
</div>
</div> <!-- ********* end thumb *********** -->
</div>
</div>
And, the modal i want will look like:
<div class="modal">
<div class="overlay"></div>
<div class="modal-wrapper">
click to close modal
<div class="container-fluid">
<div class="col-sm-12 col-md-5">
<div class="tmb-gray">
<img src="img/xyz/small-icon.png">
<h3>Description heading</h3>
<p>
Description details here.
</p>
</div>
</div>
<div class="col-sm-12 col-md-7">
<img src="img/xyz/large-image1.png"> <!-- large slider image, it was hidden in thumbnail -->
<a class="next-img"><img src="img/xyz/next.png"></a>
<a class="prev-img"><img src="img/xyz/prev.png"></a>
</div>
</div>
</div>
Firstly note that you should describe the problem and what has been done so far to solve it when posting a question on SO.
Secondly read Varying modal content based on trigger button at Bootstrap's docs.
And than, i think you should create one modal and change its content dynamically onload, and after pressing the previous / next images (buttons). I create an example that can be found at: http://jsfiddle.net/esLad6x8/
First create a array of object that describe your images / thumbs:
var images = new Array();
for (var i=0; i<10; i++) {
images.push({img: 'http://dummyimage.com/600x400/000/fff&text=image' + i, thumb: 'http://dummyimage.com/100x100/000/fff&text=thumb' + i, head:'heading' + i, description:'Description' + i + ' details here.'});
}
Alternatively you could read the above information from your thumb's grid.
html of the modal
You should use Bootstrap's modal classes to use the modal jQuery Plugin, see: http://getbootstrap.com/javascript/#modals
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<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>
</div>
<div class="modal-body">
<div class="col-sm-12 col-md-5">
<div class="tmb-gray">
<img src="">
<h3>Description heading</h3>
<p>
Description details here.
</p>
</div>
</div>
<div class="col-sm-12 col-md-7">
<img src="" class="img-responsive"> <!-- large slider image, it was hidden in thumbnail -->
<a class="prev-img btn btn-primary">Previous</a>
<a class="next-img btn btn-primary">Next</a>
</div>
</div>
<div class="modal-footer"> </div>
</div>
</div>
</div>
A button to open the modal can look like that shown below:
<button type="button" class="openmodal btn btn-primary btn-lg" data-thumb="0">
First Thumb
</button>
The on click event of the above button:
$('.openmodal').on('click',function(){
setModalContent($( this ).data('thumb'));
$('#myModal').modal('show');//pop up modal
});
The setModalContent function used in the preceding code can look like as follows:
function setModalContent($thumbNumber) {
$('#myModal .tmb-gray h3').text(images[$thumbNumber].head);
$('#myModal .tmb-gray h3 + p').text(images[$thumbNumber].description);
$('#myModal .tmb-gray > img').attr('src',images[$thumbNumber].thumb);
$('#myModal .modal-body img').last().attr('src',images[$thumbNumber].img);
/* set next and previous buttons */
$('.prev-img').data('thumb',($thumbNumber - 1 >= 0) ? $thumbNumber - 1 : images.length - 1);
$('.next-img').data('thumb',($thumbNumber + 1 < images.length) ? $thumbNumber + 1 : 0);
}
And finally create the click events for the previous/next navigation, which only change the content of a already opened modal:
$('.modal').on('click','.prev-img',function(){ setModalContent($( this ).data('thumb'));});
$('.modal').on('click','.next-img',function(){ setModalContent($( this ).data('thumb'));});
I am trying to create a simple modal using twitter bootstrap. The function of that modal is to take the name of the link clicked on, and use that name as a header. Each of the names are in a Django Database. I followed this link for reference: Passing data to a bootstrap modal
#Button to toggle modal
<a data-toggle="modal" data-id="{{ name }}" title="Add this item" class="open- AddBookDialog " href="#addBookDialog">{{ name }}</a><br />
#Modal
<div class="modal hide fade" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<input type="text" name="nameId" id="nameId" />
<p>some content</p>
</div>
</div>
#JavaScript
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myNameId = $(this).data('id');
$("modal-body #nameId").val( myNameId );
});
</script>
What the above does is displays a text box with the characters name in the box. What I would like is to have the name as the header, not in a text box. When I remove the textbox, and place a header tag with the same id and name, nothing will show. Is there a way to complete this task.
the header is the first h3 in the modal.
So you need to add a h3 element under ".modal-header" with an id and set the .html() of that element. :)
Look here for reference: http://twitter.github.io/bootstrap/javascript.html#modals
Here's the code:
#Modal
<div class="modal hide fade" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3 class="hdrtitle">This is the header</h3>
</div>
<div class="modal-body">
<input type="text" name="nameId" id="nameId" />
<p>some content</p>
</div>
</div>
Using a code like:
$('.modal .hdrtitle').html('This is the header');
and then showing it with:
$('.modal').modal('toggle');
works.
The one-off way
If this is the only time you'll ever need to do a UI-binding behavior in your site/app, do something like this:
$('.header-link').click(function(e) {
$('.modal-header h4').html($(e.target).html())
})
CodePen Demo
This will just take the text (actually the HTML) in the link itself and put that in the header.
Using a library
If you plan to do these sorts of cool tricks in more parts of your app, consider using a UI-binding library like Angular JS or Knockout. This way you can data-bind parts of your UI with events.
I found the answer. Thanks to #PaoloCasciello for a layout.
Instead of an .on function in javascript, it really needed to be .html. So here is what the final code will look like.
<!-- Modal -->
<div class="modal hide fade" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3 id="nameId" />
</div>
<div class="modal-body">
<p>some content</p>
</div>
</div>
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myNameId = $(this).data('id');
var myNameDescription = $(this).data('description');
$(".modal-header #nameId").html( myNameId );