Dynamically load information to Twitter Bootstrap modal
here is the solution ,
<a href="#" id="1" class="push">click</a>
use a div on your modal body , like this
<div class="modal-body">
<div class="something" style="display:none;">
// here you can show your output dynamically
</div>
</div>
now put data into the .something
with ajax calling .please check http://api.jquery.com/jQuery.ajax/ to know more about jquery ajax.
$(function(){
$('.push').click(function(){
var essay_id = $(this).attr('id');
$.ajax({
type : 'post',
url : 'your_url.php', // in here you should put your query
data : 'post_id='+ essay_id, // here you pass your id via ajax .
// in php you should use $_POST['post_id'] to get this value
success : function(r)
{
// now you can show output in your modal
$('#mymodal').show(); // put your modal id
$('.something').show().html(r);
}
});
});
});
Dynamically build Twitter Bootstrap modal
Update:
Since posting this, I've found an elegant bootstrap 3 modal wrapper function here, which doesn't require adding a div to the html code.
Here's a code sample that demonstrates this. To use, just add a div in your <body> (inside bootstrap's <div class="container">, for example:
<div id="idMyModal"></div>
and then you can use it via:
var header = "This is my dynamic header";
var content = "This is my dynamic content";
var strSubmitFunc = "applyButtonFunc()";
var btnText = "Just do it!";
doModal('idMyModal', header, content, strSubmitFunc, btnText);
To close the modal, issue a call to hideModal, also defined below:
function doModal(placementId, heading, formContent, strSubmitFunc, btnText)
{
var html = '<div id="modalWindow" class="modal hide fade in" style="display:none;">';
html += '<div class="modal-header">';
html += '<a class="close" data-dismiss="modal">×</a>';
html += '<h4>'+heading+'</h4>'
html += '</div>';
html += '<div class="modal-body">';
html += '<p>';
html += formContent;
html += '</div>';
html += '<div class="modal-footer">';
if (btnText!='') {
html += '<span class="btn btn-success"';
html += ' onClick="'+strSubmitFunc+'">'+btnText;
html += '</span>';
}
html += '<span class="btn" data-dismiss="modal">';
html += 'Close';
html += '</span>'; // close button
html += '</div>'; // footer
html += '</div>'; // modalWindow
$("#"+placementId).html(html);
$("#modalWindow").modal();
}
function hideModal()
{
// Using a very general selector - this is because $('#modalDiv').hide
// will remove the modal window but not the mask
$('.modal.in').modal('hide');
}
Load dynamic URL via modal
The Modal plugin executes the load()
method in it's constructor, so really the only way to change the remote content of a Modal (other than manually doing the AJAX yourself) is to destroy it before doing another call:
$('#view_more')
.removeData('modal')
.modal({
remote: someURL,
show: false
});
There are more details in answer to a similar post: Twitter bootstrap remote modal shows same content everytime
How to resize Twitter Bootstrap modal dynamically based on the content
Since your content must be dynamic you can set the css properties of the modal dynamically on show
event of the modal which will re-size the modal overriding its default specs. Reason being bootstrap applies a max-height to the modal body with the css rule as below:
.modal-body {
position: relative;
overflow-y: auto;
max-height: 400px;
padding: 15px;
}
So you can add inline styles dynamically using jquery css
method:
For newer versions of bootstrap use show.bs.modal
$('#modal').on('show.bs.modal', function () {
$(this).find('.modal-body').css({
width:'auto', //probably not needed
height:'auto', //probably not needed
'max-height':'100%'
});
});
For older versions of bootstrap use show
$('#modal').on('show', function () {
$(this).find('.modal-body').css({
width:'auto', //probably not needed
height:'auto', //probably not needed
'max-height':'100%'
});
});
or use a css rule to override:
.autoModal.modal .modal-body{
max-height: 100%;
}
and add this class autoModal
to your target modals.
Change the content dynamically in the fiddle, you will see the modal getting resized accordingly. Demo
Newer version of bootstrap see the available event names
.
- show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
- shown.bs.modal This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
- hide.bs.modal This event is fired immediately when the hide instance method has been called.
- hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
- loaded.bs.modal This event is fired when the modal has loaded content using the remote option.
Older version of bootstrap modal events supported.
- Show - This event fires immediately when the show instance method is called.
- shown - This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
- hide - This event is fired immediately when the hide instance method has been called.
- hidden - This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).
Related Topics
Try/Catch Block in PHP Not Catching Exception
How to Block Uploads of Nude Images
Check If a String Contain Multiple Specific Words
How to Create a Logfile in PHP
Best Way to Do a Weighted Search Over Multiple Fields in MySQL
Upload Multiple Images with Jquery Ajax and Process Them with PHP
Securing a Rest API Accessible from Android
A Restful Persistence Solution Usable with Backbone.Js... in PHP
PHP - Iterate on String Characters