Develop Reference

How to bootstrap modal popup via a variable?

I am studying the bootstrap, and follow the example:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Shows the modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<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）标题
</h4>
</div>
<div class="modal-body">
在这里添加一些文本
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
if I click the button the modal will popup, but I don't understand which variable is controlling the modal popup and disappear.
I want to through a variable to popup it. there is a requirement.
when I enter a Smarty page, if the page do not exists a access_token variable, I want the modal popup automatically.
So, how to realize in this example?

With JavaScript (jQuery), select the modal element and store it in variable.
Trigger the show method.
var myModal = $("#myModal");
myModal.modal("show");

To show a modal:
$('#myModal').modal('show');
To hide a modal:
$('#myModal').modal('hide');

How to properly set up a modal to appear when a button is pressed using bootstrap?

I am trying to get a modal to appear when the button below is clicked using bootstrap. I've tested it already without the "modal hide fade" and the modal appears on the page like it should. There must be something wrong with the way I have set up the button, but I'm not sure what it is. Your help is appreciated.
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
</button>
<div id="myModal" class="modal hide fade" role="dialog">
<div class= "modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">
modal headers
</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>

Remove hide class from <div id="myModal" class="modal hide fade" role="dialog">
So it should look like <div id="myModal" class="modal fade" role="dialog">
See here, seems working well - https://jsfiddle.net/VaTz88/arkbqe9j/

Open a modal (in Codeigniter) that loads (in a iframe) content from an URL that depends of a php var

I'm opening this modal:
<div id="myModal" class="modal fade" aria-labelledby="myModalLabel" aria-hidden="true" tabindex="-1" role="dialog">
<div class="modal-body" id="myModalBody">
<script type="text/javascript">
$(document).ready(function(){
$("#contentHistorial").attr("src","<?php echo base_url('panel/usuarios_datos/historial/' . $item->usuId ) ?>");
})
</script>
<iframe id="contentHistorial" src="<?php echo base_url('panel/usuarios_datos/historial/' . $item->usuId ) ?>"></iframe>
</div>
</div>
I'm calling it with:
<a href="#" title="Historial del Usuario" data-toggle="modal" data-html="true" data-target="#myModal" data-content="">
<?php echo $item->usuRut;?>
</a>
I have to pass the $usuRut in order to get that the modal load the content of an URL (a view) like:
panel/usuarios_datos/historial/13
where "13" has to be the usuId that comes from a link that I clic.
I can load the modal, and the content of a static page (always the content of panel/usuarios_datos/historial/1) but I can't manage to load the usuId of a link... any help?

You can load modal from remote url. I assume you use bootstrap.
Modal:
<!-- 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">Modal title</h4>
</div>
<div class="modal-body"><div class="te"></div></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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Run by:
<a data-toggle="modal" href="[link]" data-target="#myModal">Click me !</a>
Where link is your link to .modal-content
Example fiddle:
http://jsfiddle.net/koala_dev/NUCgp/918/

BootStrap: With 5 Modal Forms on a page. How to check with JavaScript/jQuery which one is open

I have 5 modal forms in a page. And I want to get the Id of the currently opened one.
I know I can check with $('#myModal').hasClass('in');. If I have 5 modal forms I have to write this 5 times. Which I don't want to.
Is there some way I can determine which modal the user has open currently open and then I will get the id of that.

You can use the shown.bs.modal event to get the current open modal.
Modal Events
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.
Here is an example
$('.modal').on('shown.bs.modal', function (e) {
var crntModalId = "current modal id is: " + $(this).attr('id');
$('.output').text('');
$('.output').text(crntModalId);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="output"></div>
<br>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-One">
Launch modal one
</button>
<!-- Modal -->
<div class="modal fade" id="myModal-One" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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" 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>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-Two">
Launch modal two
</button>
<!-- Modal -->
<div class="modal fade" id="myModal-Two" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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" 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>

It's very simple, with bootstrap modal event's
To get any attribute value from the modal trigger button you can use $(e.relatedTarget)
To get the modal attribute value you can use $(e.currentTarget)
In your case, you can get the Opened modal id with
$('.modal').on('shown.bs.modal', function(e) {
var modalid = $(e.currentTarget).attr('id');
});
Fiddle

A bootstrap modal gets automatically the class 'shown.bs.modal' when is open, so you can use this to track which one is open.

Dynamic bootstrap modal within a loop

I am creating spans in a jinja2 loop, when the user click on them, a modal should appear with a dynamic content . The dynamic item more specifically is the image of the map inside each modal :
<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
To avoid one static modal that will repeat itself within the loop, I added a dynamic id to the modal dialog :
<div class="modal-dialog" id="{{id}}" >
But it seems that this doesn't work . Here is my code :
<span style="cursor: pointer;" type="button" class="badge badge-white" data-toggle="modal" data-target="#myModal">Map</span>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" id="{{id}}" >
<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">Lorem ipsum<small>Lorem ipsum</small></h4>
</div>
<div class="modal-body text-center pagination-centered">
<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
</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>

If your are in a loop, you must use different modal id, try :
<span style="cursor: pointer;" type="button" class="badge badge-white" data-toggle="modal" data-target="#myModal{{id}}">Map</span>
<!-- Modal -->
<div class="modal fade" id="myModal{{id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" id="{{id}}" >
<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">Lorem ipsum<small>Lorem ipsum</small></h4>
</div>
<div class="modal-body text-center pagination-centered">
<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
</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>

I think i figured this out.Don't keep id as a number but add some random text in front. e.g; id="#modal{{ id }}".
I was also caught in this problem and this solved it. I just made a check by console logging the element with id='{{ id }}' and it was showing error on the console but when i added some text like id='modal{{ id }}', it worked perfectly.

If Anyone is still looking for a solution then try the following code (Note: I have done it in PHP as you can see php block there in code.) this it will work for sure
<?php
$id=0;//define on the top of your function
foreach()
<button type="button" class="btn-link" data-toggle="modal" data-target="#myModal<?php echo $id;?>">Read More</button></div>
<div id="myModal<?php echo $id;?>" class="modal fade" role="dialog">
<div class="modal-dialog"> <!-- Modal content-->
<div class="modal-content">
//Popup content
</div>
</div>
</div>
$id=$id+;//increase id value by for next iteration?>
endforech;