I created iframe for my own map (it's a big image).
I need to create buttons for zoom-in and zoom-out on this image.
Can you help me, please.
I googled it, but couldn't find any clear answer for this.
I have this
<div class="scale_buttons">
<button class="button button1" id="zoom-in">+</button>
<button class="button button2" id="zoom-out">-</button>
</div>
<div class="map" id="map">
</div><!--map-->
Image is a bg. And I need to zoom it by click the buttons
Related
I would like to add a background image on the header of the modal and so I thought if I would do the following:
.modal-header{
background-image: url('../images/extended_top_provider.gif');
}
The header would display the image but it does. Instead it does the following:
I also tried to add icons for the different browsers but it doesnt display the image either.
Any help would be appreciated
UPDATE
I am able to add the image, not the right one, something wrong with the path of the image, but the images below are not aligning correctly, I do not know why.
$(function(){
$('##myModal').modal('show');
});
.client_logos {
display: inline-block;
width:100%;
}
<div class="ie-only" style="overflow-y:hidden;">
<div class="modal fade in" id="myModal" aria-hidden="false">
<div class="modal-dialog modal-md custom-height-modal">
<div class="modal-content">
<div class="modal-header" style="background: url('http://www.freedigitalphotos.net/images/img/homepage/87357.jpg');">
<button type="button" class="close" data-dismiss="modal">x</button>
<h2 class="modal-header">Outdated Browser Detected</h2><p>Our website has detected that you are using an outdated browser. Using your current browser will prevent you from accesing featuers on your website. An upgrade is not required, but is strongly recommend to improve your browsing experince on our website.<br /><br />
<b>Use the links below to download a new browser or upgrade your existing browser.</b></p>
</div><!---Modal-Header Div--->
<div class="modal-body client_logos">
<p> <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e3/Firefox-logo.svg/120px-Firefox-logo.svg.png" alt="image" />
<img class="img-responsive" src="https://productforums.google.com/forum/image/GDF/15104268797498972201/8f39d8ec-5483-4e30-977d-817c8fd1c110" /> </p>
</div><!---Modal-Body Div--->
<div class="modal-footer">
<p class="text-center"><a class="btn btn-default" data-dismiss="modal">Close</a></p>
</div><!---Modal-Footer Div--->
</div><!---Modal-Content Div--->
</div><!---Custom Height Div--->
</div><!---Modal Fade in Div--->
</div><!---Start of Modal Div--->
<!--End of Modal container-->
This is probably because of one very simple reason, background-image property does not take any width and height, so you may specify your width and height to .modal-header like this :
.modal-header{
width:100px;
height:100px;
background-image: url('../images/extended_top_provider.gif');
}
Try this, and spot the difference, if you want you could simply add an <img> tag inside your .modal-header but note that background-image doesn't stop page rendering, while img tag does :)
so this is probably pretty simple, but it's stumping the hell out of me.
Basically I have a bootstrap modal and I want the header to have a title along with an image on the right. I can't get the image to move up a little bit so that the whole border is visible.
Here is the code for the header, and an image of what I'm getting.
<div class="modal-header">
<button id="btnCloseModal" type="button" class="close" data-dismiss="modal">×</button>
<img src="../images/MyEKC_Final.jpg" width="95" height="34" class="top-align" style="float: right;" />
<h3 class="modal-title" id="modalTitleHeader">Getting Started with MyEKC</h3>
</div>
If you look at the top right, the image is overlapping the border. Ideally I'd like for the logo to be up higher so it's even with the header, but if that's not possible if I can just move the border down too that would be okay.
Any help would be greatly appreciated. Thanks!
I'm using the Angular UI modal and would like to make it smaller. According to Bootstrap's website, to make the modal smaller I should use the modal-sm modifier class:
<div class="modal-dialog modal-sm">
I'm having trouble incorporating this div into my Angular modal template. Every Angular UI modal example I have found includes only the modal-header, modal-body, and modal-footer divs in the template. Are the outer modal, modal-dialog, and modal-content divs already provided by Angular? If so, is there any way to overwrite them so that I can apply "modal-sm" to the modal-dialog div? I tried adding the full modal div structure to the template and it caused problems with my modal. I also tried setting windowClass = "modal-dialog modal-sm" in my controller but that didn't work either. Any ideas? Thanks.
Update: here is the content of my modal template after I tried to include the outer Bootstrap div's. It is a very simple modal to confirm the user wants to delete an item.
<div class="modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4>Confirm Delete</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete?</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="confirm()">Confirm</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
</div>
The result is it doesn't show my modal correctly. I can see the backdrop and a very tiny sliver of what I assume to be my modal.
Update: Using #lmyers's solution worked for me, but instead of specifying the width as 60% I did the following to make use of the #modal-sm Less variable.
.confirm-modal .modal-dialog {
width: #modal-sm;
}
OK, I understand now. Here's what we did in the .css:
.appcustom-modal-med > .modal-dialog {
width: 60%;
}
then in the controller:
windowClass: 'appcustom-modal-med'
I never had an experience with Bootstrap modal popup before. But in a recent theme purchase that was fully bootstrap based they demoed modal popups too which was perfectly working on their HTML page. But when I integrate in my master page, everything working fine. But the modal popup alone shows as double as you can see in the image below
I didnt get any idea why it behaves likes this when everything in the HTML page and ASPX page are alike. Also when the modal popup shows, there is a shifting like thing goingon on the page or a kinda small jumping towards the right when the modal popup comes.
Here is my modal popup code
<div class="modal fade bs-example-modal-sm" id="mytestmodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
And here is the button code
<button class="btn btn-info btn-block" data-toggle="modal" data-target="#mytestmodal">
<i class="fa fa-copy"></i>| Clone Data
</button>
For that jumping, edit it's CSS
body.modal-open{
overflow: visible !important;
}
The lateral shifting is a known open bug in Bootstrap.
Assuming your modal isn't long enough to need to be scrolled, you could try this supposed workaround:
.modal {
overflow-y: auto;
}
.modal-open {
overflow: auto;
}
I'm pretty stuck on this problem that I'm having getting Bootstrap modals to pop up. Here's an example:
http://jsfiddle.net/xaU5d/
<div class="container">
<h2>Example of creating Modals with Twitter Bootstrap</h2>
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>You can add some text here.</p>
</div>
<div class="modal-footer">
Call to action
Close
</div>
</div>
<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">
Launch demo modal</a></p>
</div>
And pulling the css from:
//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css
Essentially, the when the button is pressed, the modal tries to load (the style changes to the body happen which causes it to dim), but the tags containing the modal content never get rendered.
I believe this is a CSS problem at heart. When you remove the css and rerun, the styles go away, of course, but clicking on the anchor actually causes the change to happen.
I have to assume it's something that I'm doing, so could anyone look at the jsfiddle example and let me know where my error is?
Thanks in advance!
Not a full answer, but adding modal-content to your `div id="example`` allows the modal to run, but not on the correct layer.
Bootstrap 3 changed how they load modals a bit:
Modal markup has changed significantly. The .modal-header, .modal-body, and .modal-footer sections are now wrapped in .modal-content and .modal-dialog for better mobile styling and behavior.