I do have created a menu in bootstrap and want to show a modal when the user hits this option:
<li><span class="glyphicon glyphicon-check"></span> Asistencia técnica</li>
the modal I want to show is this
<div class="modal fade" id="modalAgrupacion" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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>
<h3>INSAFORP</h3>
</div>
<div class="modal-body">
<h4>Evento Libre Gestión</h4>
<p>Solicitud ingresada con exito. </p>
</div>
<div class="modal-footer">
Cerrar
</div>
</div>
</div>
</div>
could you please help me?
You open a Bootstrap modal with what is called a trigger. In your case, all you have to do is add two attributes on your a tag like so:
<li><span class="glyphicon glyphicon-check"></span> Asistencia técnica</li>
It was easy, just had to add an id to the specific li element and after that use jQuery to capture the click event to show the modal
Related
I have modal box like this:
<!-- Modal FOR PLAYERS-->
<div class="modal fade" id="Info" 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>
<h3 class="modal-title" id="myModalLabel">Player profile for</h3>
</div>
<div class="modal-body info-player">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<label>GOALK IN THIS SEASON :</label> 11
</div>
</div>
</div>
</div>
</div>
</div>
And i have added a Span Element where users can click on it to get the relevant data:
<span class="playerInfo" data-toggle="modal" data-target="#Info">Info</span>
but now i wan to have some "data-XYZ='VALUE'" attributes in my SPAN Element and I want to parse to my modal box, how could I do someting like this?
I only know the way with an jquery onclick handler, but i think is also another better way or what you think?
Thanks for your help or any hints...
thanks
You can make use of the bootstrap shown.bs.modal event
Occurs when the modal is fully shown (after CSS transitions have completed)
$('#Info').on('shown.bs.modal', function() {
$(".playerInfo").data("xyz"); //value
// use the above data however you want
})
HTML:
<span class="playerInfo" data-xyz="value" data-toggle="modal" data-target="#Info">Info</span>
I am trying to create a html modal window in zk. But the hide functionality hides also the window as shown i the image
Code snippet:
<tabpanel id="borgerdkRequestPanel2">
<div>
<html xmlns="native" xmlns:u="zul"
xmlns:zk="zk">
<a data-target="#myModal1" role="button"
class="btn" data-toggle="modal">
Launch demo modal
</a>
<div id="myModal1" class="modal hide "
tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="false">
×
</button>
<h3 id="myModalLabel1">
Modal header
</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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>
</html>
</div>
</tabpanel>
It seems to be some kind of zk problem, as the code runs fine in html. CSS is bootstrap. And ZK framework is 7.0.3.
remove hide class from your modal. If you want some animation add instead fade class to your modal.
The result should be this:
<div id="myModal1" class="modal fade"
tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
Tested on ZK 7.0.4
On this example: HTML / CSS Popup div on text click
How can I make this load on the index page when they visit the site the first time. I don't want a button to click, I want this load automatically; and then have a close button when they read the content on the popup. Thanks in advance.
Hi you can do this using bootstrap model popup
for this include bootstrap css and js files and use below code
Your Html Code
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="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">Intorduction</h4>
</div>
<div class="modal-body">
Body Text
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
then use this script
<script>
if (localStorage.getItem('showModal')!='yes')
{
localStorage.setItem('showModal','yes');
$('#myModal').modal('show');
}
</script>
Dont know whats really happening, but i just implement modal (without the js call) and it opens automatically on page load.
I have two on the same page, does anybody knows why this is happening and how to make them to open only on the link?
thanks in advance
Title
<div id="save-list" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<p><h4>sample text</h4></p>
<div class="row-fluid">
<div class="span12"><input name="" type="text"></div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">No</button>
<button class="btn btn-confirm">Yes</button>
</div>
</div>
And this one
Popup de transición entre tabs
<div id="save-add-guest" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<p><h4>Would you like to add these <br>contacts to the guest list?</h4></p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">No, Thanks</button>
<button class="btn btn-confirm">Yes Please!</button>
</div>
</div>
I have two modal dialogues in my webpage, using Twitter-bootstrap, but only one of them works.
Here is the code:
Phone and Email
<div id="format" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="format" aria-hidden="true">
<div class="modal-header">
<!--This needs a fancy phone icon and so does the button.-->
<img src="img/numberheader.png" alt="">
</div>
<div class="modal-body">
<p>
<h4>Office:</h4>
123 4567<br>
<h4>Programme Manager:</h4>
765 4321<br>
<hr>
<img src="img/emailheader.png" alt="">
<h4>Email us</h4>Iremovedthemailaddresses<br>
Click Here To Email Us
<br>
</p>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
Phone and Email
<div id="myModal" class="modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<!--This needs a fancy phone icon and so does the button.-->
<img src="img/numberheader.png" alt="">
</div>
<div class="modal-body">
<p>
<h4>Office:</h4>
123 4567<br>
<h4>Programme Manager:</h4>
765 4321<br>
<hr>
<img src="img/emailheader.png" alt="">
<h4>Email us</h4>Iremovedthemailaddresses<br>
Click Here To Email Us
<br>
</p>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
The content of the two modals has not been separated into what it's meant to be yet, it's just proof of concept at this point (so ignore the content).
However, it only works for the second one, not the first. What can I do to make both modals work?
Make sure your anchor tags and modal id are unique.
Launch demo modal
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
demo: http://jsfiddle.net/uf2UR/