this title seems pretty common, but i can't find a correct answer for my problem from them.
I have a bootstrap template, and what i want to do is to pass some variable to a modal.
I'm using codeigniter and also smarty..
this is the code from my template:
<td><a class="btn mini red-stripe" href="#myModal3" data-id="{$frontuser->id}" role="button" data-toggle="modal">Eliminar</a></td>
<!-- modal -->
<div id="myModal3" class="modal hide fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel3" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> </button>
<h3 id="myModalLabel3">Eliminar Usuario Front</h3>
</div>
<div class="modal-body">
<p>Desea eliminar el usuario "{$frontuser->username}"?</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
<button data-dismiss="modal" class="btn blue">Confirmar</button>
</div>
</div>
<!-- end modal -->
i tried to find a JS file in order to analize it and see if i have to make some moedifications in there, but i didn't find a js that controls this. So, is this meaning that my modal is entirely managed by html?
if that's so..where do i put the variable in order to make the modal show this info?
thx
These look like PHP variables which you have to wrap in <?php [...] ?>.
Try this version
<td>
<a class="btn mini red-stripe" href="#myModal3" data-id=<?php echo $frontuser->id; ?>" role="button" data-toggle="modal">Eliminar</a></td>
<!-- modal -->
<div id="myModal3" class="modal hide fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel3" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> </button>
<h3 id="myModalLabel3">Eliminar Usuario Front</h3>
</div>
<div class="modal-body">
<p>Desea eliminar el usuario <?php echo $frontuser->username; ?>?</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
<button data-dismiss="modal" class="btn blue">Confirmar</button>
</div>
</div>
<!-- end modal -->
If you are using a specific template and wish to stick to the templates syntax, you may do so accordingly. The above snippet should work regardless.
Cheers
Related
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');
I've been reading Bootstrap 3's documents about modals, and it makes sense to use this HTML for the modal content. I'd be creating this modal on mobile:
<!-- Button trigger modal -->
<button type="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">
<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>
My question is, I'd want to reuse the HTML inside the body of the modal for a sidebar on the desktop media query. How would I do so without repeating the HTML for a second time as a completely different div that simply contains the exact same content?
I am trying to do something which i think many people have done; and have read some examples etc; and have tried to piece together what i need but not having any luck. What I am trying to do is have a button pass a variable to a bootstrap modal. And then somehow echo or print the variable within the modal so i know it is working. I built some code from examples I found
here is my button:
<button data-target="#upload-images-modal" data-toggle="modal" class="button upload-images-button" data-yourParameter="<?php echo $image_id; ?>">Upload Images
</button>
I was not sure if i could echo the image id for the variable to be passed but have done a lot of stuff like that before so seems like it would be ok (this could be an issue though)
Secondly - here is my modal:
<div id="upload-images-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="upload-images-modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close text-button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="upload-images-modalLabel">Upload Images</h4>
</div>
<div class="modal-body">
ok ok ok
<script>
$('#upload-images-modal').on('show.bs.modal', function(e) {
var yourParameter = e.relatedTarget.dataset.yourparameter;
// Do some stuff w/ it.
alert(yourParameter);
});
</script>
</div>
<div class="modal-footer">
<button type="button" class="button" data-dismiss="modal">Cancel</button>
<button type="button" class="button">Add Images</button>
</div>
</div>
A couple of notes on this. I was really uncertain where the script should be "placed" in relation to the modal. So I just placed in the modal body.
I tried to do an alert to see the variable that was passed. Nothing is happening though. So I am hoping someone can give me some pointers on what I am doing wrong.
Thanks so much,
Gerard
Your issue could be down to using a early version of bootstrap where relatedTarget is not passed.
As in regards to your js, put it in the bottom of the body or in a separate js file reference from the bottom of the body and after any libraries, ie jquery and bootstrap.
Here is your code working with the latest bootstap version
$('#upload-images-modal').on('show.bs.modal', function(e, f, g) {
var yourParameter = e.relatedTarget.dataset.yourparameter;
// Do some stuff w/ it.
alert(yourParameter);
});
<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.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button data-target="#upload-images-modal" data-toggle="modal" class="button upload-images-button" data-yourParameter="test">Upload Images
</button>
<div id="upload-images-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="upload-images-modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close text-button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="upload-images-modalLabel">Upload Images</h4>
</div>
<div class="modal-body">
ok ok ok
<button data-target="#upload-images-modal" data-toggle="modal" class="button upload-images-button" data-yourParameter="<?php echo $image_id; ?>">Upload Images
</button>
</div>
<div class="modal-footer">
<button type="button" class="button" data-dismiss="modal">Cancel</button>
<button type="button" class="button">Add Images</button>
</div>
</div>
<!-- Modal -->
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
<select class="selectpicker" data-container="body">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
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;
I am experiencing a problem with one of the three modals running on one page. When it's visible and you click it's body it opens the other one behind it.
This is the opened one:
<span class="help-block">#Html.Raw(ptype.Description.StripHtml())</span>
<div id="klarnaModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="klarnaModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-contents">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="klarnaModalLabel">#Html.Raw(ptype.Description)</h3>
</div>
<div class="modal-body">
<iframe src="https://cdn.klarna.com/1.0/shared/content/legal/terms/24637/sv_se/invoice?fee=0"></iframe>
</div>
</div>
</div>
</div>
And the one that opens by clicking the other body:
<input type="radio" name="paymenttype" id="#ptype.Id" value="#ptype.Id" data-toggle="modal" data-target="#klarnaSubmitModal" data-remote="true" />
<div id="klarnaSubmitModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="klarnaSubmitModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-contents">
<div class="modal-header">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="klarnaSubmitModalLabel"><i class="icon icon-info-sign"></i>Vigtigt</h3>
</div>
<div class="modal-body">
Det er ikke muligt at benytte alternativ leveringsadresse sammen med Klarna Faktura.<br /><br />
Vælger du at fortsætte vil din ordre blive leveret til faktureringsadressen.<br /><br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-medium btn-primary" id="acceptklarna-btn">
<i class="icon icon-ok-sign"></i><b><span>Fortsæt</span></b>
</button>
<button type="button" class="btn btn-medium btn-primary" id="resetpayment-btn">
<i class="icon icon-circle-arrow-down"></i><span>Vælg en anden betalingsmetode</span>
</button>
</div>
</div>
</div>
</div>
EDIT! This reproduces my problem: http://jsfiddle.net/mPWw4/3/
Why is the two connected so that a click on the first ones body opens the other?
Move your modals outside of your main html. I would recommend somewhere close to the to the end of your </body> tag.
Also just as a side note some of your markup on the modals e.g. <div class="modal-dialog"> and <div class="modal-content"> is for Bootstrap 3.0 since your using bootstrap 2.3.2 you don't really need it.
I updated your fiddle by moving the modals out of the main html and it works as expected.
http://jsfiddle.net/mPWw4/4/