I am looking for jQuery modal popup which should display image like sample check to show routing number etc,.. When I click on a Routing number(?)question mark it should pop-up an image and should have closing button on the top right corner. I have seen different approaches but couldnt find exact one
Check out the Bootstrap Modal. Click the Launch demo modal button.
In <head> make sure you include the javascript for jquery and bootstrap.js. You can download bootstrap.js from the bootstrap site. You also might want to include the bootstrap.css as well.
Once your <head> is all setup, in your body you need to add the modal code which will be hidden and you'll need to add a button to show the modal. The button and modal are linked together by id.
<!-- Button to trigger modal -->
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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>
Related
Im new in web application and i came across the modal feature in bootstrap, i did researched and came across some examples that works perfectly fine but when i tried to copy what they did, an underlying image or panel or i dont know displays behind the modal... how to remove this? ive been trapped in this thing for like 3 days.. haha.. thanks...
Here is the image:-
and the code from w3schools... this should work but i dont know why..
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
As I checked your code of modal, This is coming fine.
check here
The problem is in your html kindly show us the entire html so that we can debug your code.
hi your code is working just fine. i find no problem with it.
output of the code
hopefully problem with the browser?
I have a JavaScript with alert box saying some text when an image is uploaded with wrong dimension.I want to show that alert as a Bootstrap alert instead of a popup window?
I have a separate JavaScript file.
In Bootstrap they're not called "pop ups", but instead modals. Its the same general principle (a alert onto the screen for the user to interact with), but just more pretty. See the link below for more information on modals, and the code as well (fully functional). Hope this helps. - Jusitn
Link: http://www.w3schools.com/bootstrap/bootstrap_modal.asp
Edit: Dont forget to add the bootstrap CDN's for it to work (both the CSS and Javascript CDNs) between your head tags
CDN can be found here: http://www.bootstrapcdn.com/
Code:
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I have a twitter bootstrap modal that does not render the dialog box correctly and I'm not sure why.
HTML
<p class="text-center btn-p"><button class="btn btn-warning" data-toggle="modal" data-target="#myModal2">Compare</button></p>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal2Label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<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="myModal2Label">New Label</h4>
</div>
<div class="modal-body">
<p>Something for now.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You can see the html in action on this page: Superfood Picker Click on the "Compare" button on the front page.
Based on the html alone I don't see why it doesn't work.
Other relevant points:
1). I have two modals on the same page.
2). The other one works fine.
3). When I switch the ID of the dysfunctional modal to the ID of the modal that displays correctly that modal also displays correctly.
4). The latter point would suggest to me that maybe it's the HTML that calls the modal that's the problem, but when I compare the two I don't see why one would work and the other wouldn't.
Here's the HTML for the second (functional) modal:
HTML (called through a jquery function)
$(".button-class").html("<div class='text-center'><ul class='list-inline'><li><button class='btn btn-success'><a href=" + state.greens[num].website + " target='_blank'>Company Website</a></button></li> <li><button class='btn btn-success' data-toggle='modal' data-target='#myModal'>View the Label</button></li></ul></div>");
I thought that maybe the two were interfering with one another, but if that was the case I'm not sure why the second one would work fine.
As mentioned above, the DIV with an ID of "part2" is display:none. The modal is inside that DIV. You need to make that DIV display block for the modal to be visible.
I Have the modal set like this
<body>
<div class="modal fade" id="pageopen" 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">
x
</button>
<h4 class="modal-title" id="myModalLabel">
This Modal title
</h4>
</div>
<div class="modal-body">
Add some text here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary"> Submit changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<button onclick="showModal('http://www.google.co.id/')">Show Modal</button>
</body>
I've added the latest jquery, bootstrap js and css for only the modal plugin.
The problem I have is that the modal backdrop shows, however the modal header body and etc isn't showing up.
My Code
Please provide solution, thank you
Your Javascript Code is wrong, to open a Bootstrap 3 Modal you should use:
$('#pageopen').modal({
show: true
});
If you want to load an external Page, you can set the url here:
$('#pageopen').modal({
show: true,
remote: 'http://www.example.com'
});
And better use the jQuery click Function instead of "onClick".
Your problem is that the showModal function isn't found by onclick, please stop using onclick in your html forever. That has never been a good practice.
Instead of this set an ID for button and use the .click function in JQuery:
<button id="showModal">Show Modal</button>
$("#showModal").click(function(){
$('#pageopen').modal();
});
Check JSFiddle Demo
Haha, never mind. I have separate js and css for the same bootstrap component so it overlapped over each other.
Tip for bootstrap :
Always load only one js file and one css file for bootstrap.
If you're like me that want's only part of the bootstrap instead of all the package, (e.g: modal, transition and carousel), then make it as one js and css from getbootstrap
I am using twitter bootstrap js to implement the modal.....
I used the online example.....
Copied the html, CSS and js code into the fiddle....
but I don't see any output....
http://jsfiddle.net/nJ6Mw/
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
You're missing something to kick-off the modal. You can either add a link to open it with your modal id referenced in the data-target attribute, or set the href target to be the modal div:
<a role="button" class="btn" data-toggle="modal" data-target="#myModal">Launch demo modal</a>
You can use javascript to setup your Modal div as a modal target, and to open and close it also.
Launch demo modal
...
$('#myModal').modal(options) <-- check the bootstrap site for possible options values.
$('#myModal').modal('show')
$('#myModal').modal('hide')
To make this work, I added the id of myModal to your modal div:
<div id="myModal" class="modal hide fade">
This is all as per the Bootstrap documentation. Maybe take a closer look at it?
Here is a working fiddle from your example. I added the boostrap stuff as external resources. http://jsfiddle.net/nJ6Mw/4/
Edit:
Adding the data-dismiss="modal" attribute will make the close button work.
Close