Using Twitter Bootstrap Modal - javascript

I am having soon issues using the twitter bootstrap modal in my site. My site has the has bootstrap loaded and everything but the button is not trigger the popup and I don't know why. Can someone please help me?
This is the modal right after my body tag
<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-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>

You can try this.
$(document).ready(function() {
$("#btnshow").on('click', function(event) {
$('#myModal').modal('show');
$('#myModal').on('shown', function() {
// do more here
})
});
});
sample button that calls your modal window
<button id="btnshow">Show</button>
<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-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>

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers. Here’s the simplest possible example:
http://bootboxjs.com/examples.html
bootbox.dialog({
title: "That html",
message: '<img src="images/bootstrap_logo.png" width="100px"/><br/> You can also use <b>html</b>'
});

Related

add button to bootstrap modal footer dynamically by jquery

I'm trying to add a button dynamically to the footer of a bootstrap modal.
Is that possible? Can't find it.
<div class="modal fade" id="myModalRead" 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"></h4>
</div>
<div class="modal-body"><p id="myModalBody"></p>
</div>
<div class="modal-footer" id="myModalFooter" >
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
for example this button:
> <button type="button" class="btn btn-default btn-ok"
> data-dismiss="modal">Delete or whatever</button>
jquery:
jQuery(function($) {
$("#myModalBody").html(text);
$("#myModalRead").modal('show');
});
kind of
$("#myModalFooter").addabutton();

How do I implement navigation from one modal to another one with Bootstrap?

I have several elements on a page.
When you click one of them, a modal should appears.
I wish it could be possible to navigate from one bootstrap modal to another.
How do I implement this behavior using Bootstrap?
This will be useful for you:
HTML Code
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-next">
Next
</button>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-back">
Back
</button>
<div class="modal fade" id="modal-next" 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" id="myModalLabel">Page1</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="next-trigger">Next</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-back" 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" id="myModalLabel">Page2</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="back-trigger">Back</button>
</div>
</div>
</div>
</div>
JS Code
$("#next-trigger").click(function(){
$('#modal-next').modal('hide');
$('#modal-back').modal('show');
});
$("#back-trigger").click(function(){
$('#modal-back').modal('hide');
$('#modal-next').modal('show');
})
Check it out.

I would like to know how to create a custom dialog box that rises when button gets clicked n that

I would like to know how to create a custom dialog box that rises when button gets clicked n that box should be beside the the button...please help me out brothers
You can use Bootstrap model
http://getbootstrap.com/javascript/#modals
<!-- 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" aria-hidden="true">
<div class="modal-dialog">
<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>

Image opens modal dialog bootstrap

Soooo I want to use these images I have so that when they are clicked it opens a modal dialog for a staff page on my site and I'm not sure how to do it
PS: I have seen something like this on here but its not what I wanted
<img src="https://minotar.net/helm/EpicMinerBackup">
<img src="https://minotar.net/helm/kingpooper27s">
EDIT~~~: Resolution to issue ~~~EDIT END~~
<!--####################### Start of the staff list ############################### -->
<img src="https://minotar.net/helm/EpicMinerBackup" data-toggle="modal" data-target="#Staff1" />
<div class="modal fade" id="Staff1" tabindex="-1" role="dialog" aria-labelledby="StaffModalLabel1" aria-hidden="true">
<div class="modal-dialog">
<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>
<h4 class="modal-title" id="StaffModalLabel1">EpicMinerBackup</h4>
</div>
<div class="modal-body">
The Owner of the site and server.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--########################################################################## -->
You can use data attributes to load the modal box. img href value should match modal id value prefixed with #. In case below its #myModal. If it still doesn't work check JS errors or if the bootstrap js files are loaded.
<img href="#myModal" data-toggle="modal" src="https://minotar.net/helm/EpicMinerBackup">
<div id="myModal" class="modal fade" 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>
<h3 id="myModalLabel">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>
</div>
</div>
Here is the link for sample
http://www.bootply.com/TH49jSYRm6

Bootstrap and problems with its modal

I have a problem with bootstrap,
I included my modal with these lines of code (I use Jade):
<button data-toggle="modal" href="#myModal" class="btn btn-primary">Launch demo modal</button>
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 id="myModalLabel" class="modal-title">Modal title</h4>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
When I click the button it opens the modal, but when I should close the modal, it just close the modal and leave overlay! I really don't understand why it happens...
These are the screenshot before and after close the modal:
BEFORE:
http://i.stack.imgur.com/UkcSe.jpg
AFTER:
http://i.stack.imgur.com/1Uovr.jpg
According to you what is the problem?
ps: don't touch behind, it still doesn't work well :p

Categories