This question already has answers here:
Remove blue border from css custom-styled button in Chrome
(24 answers)
Closed 6 years ago.
Would like to check what are the approaches that I can use to remove the anonymous blue outline
<div class="profile">
<a href="" data-toggle="modal" data-target="#myModal" style="border-width:none;">
<img class="img-circle" src="{{asset('images/user-profile1.jpg')}}" alt="mayor" style="border:5px solid #bfbfbf; ">
<div style="text-align:center;">
<h3>john</h3>
</div>
</a>
</div>
<div class="modal fade" id="myModal" 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>
It's not a border, it's an outline. It appears only on certain browsers like Google Chrome. You can remove it using:
img{ outline: none; }
Related
The modals in the project seems to have broke for some reason. It worked a few days ago now it seems it broke. The container div is overflowing.
This is a sample html I've been using after all the modals broke
<!-- Modal -->
<div id="regHomeModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="container" style="border-style: dotted; border-color: black;">
<div class="row" style="border-style: dotted; border-color: red;">
<div class="col-sm-9">
<btn class="test btn btn-info btn-block btn-lg">TEST BUTTON</btn>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
That's happening because bootstrap already has an inbuilt '.container' class which has its width predefined, try changing the class name and check.
I have made a working example on jsfiddle here. I am facing 2 problems.
1: I the example I have made 2 links inside a panel. Can it be true that the modalbox code is gonna fill so much inside the panel box? I need around 20 links in the modalbox, which would result in around 1200 rows. That would be quite a lot?
2: Each link should open a different modalbox, so I can change the text to match the link. How is that possible? I have to set an idea on the modal class, or is that totally wrong?
Best Regards
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">GENERAL</h3>
</div>
<div class="panel-body">
Cookie Policy<br/>
<!-- Cookie Policy Modal -->
<div class="modal fade" id="myModal" 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>This is the text in the Cookie Policy modalbox</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Opening hours<br/>
<!-- Cookie Policy Modal -->
<div class="modal fade" id="myModal" 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>This is the text in the Opening modalbox</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
</script>
I have been working on my client's project, in which I have to include a modal window. The Model window should popup when the link is clicked.
But when the modal window gets triggered, the opacity of all elements decrease including the modal window.
But the Modal window's Opacity should not be decreased by default is nt it ?
This is the HTML code of my modal window:
<div id="myModal" class="modal fade" role="dialog" style="background-color: white">
<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>
Here is my triggering html code
<div class="col-md-6 col-sm-12">
<div class="block-image-round margin-top-120">
<a href="#" data-toggle="modal" data-target="#myModal">
<img src="images/banners/1.png" style="width:100%; " alt="">
</a>
</div>
</div>
Modal window part is sibling off the triggering HTML
When The snippet running independently
But when the same snippet mentioned here used in my project code
Click this link for Example
[1]: https://plnkr.co/edit/aEbvvOWGHGQAoLf2ImiF?p=preview
Hope this will be useful to you
Try this code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-6 col-sm-6">
<div class="block-image-round margin-top-120">
<img src="http://placehold.it/200/300" style="width:100%; " alt="" data-toggle="modal" data-target="#myModal">
</div>
</div>
<div id="myModal" class="modal fade" role="dialog" style="background-color: white">
<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 page that simplified, looks like this :
<html>
<form>
//form contents here
//modal 1 here
<div class="modal fade" id="addTime" tabindex="-1" role="dialog" aria-labelledby="addTimeLabel">
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<div class="modal-footer">
</div></div></div>
</form>
// insert duplicate modals here (2 of them)
</html>
The modal within the form works perfect, but when I click on buttons to call up modals 2 and 3, they appear within the 1st modals window? How can I fix this?
Edit : If I delete the 1st modal entirely, 2 and 3 work perfect.... but I need the 1st modal too!
$(document).ready(function () {
$('#openBtn').click(function () {
$('#myModal').modal({
show: true
})
});
$(document).on('show.bs.modal', '.modal', function (event) {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
});
/* crazy batman newspaper spinny thing */
.rotate {
transform:rotate(180deg);
transition:all 0.5s;
}
.rotate.in {
transform:rotate(1800deg);
transition:all 1.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<h2>Stacked Bootstrap Modal Example.</h2>
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal fade" id="myModal">
<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">Modal 1</h4>
</div>
<div class="container"></div>
<div class="modal-body">Content for the dialog / modal goes here.
<br>
<br>
<br>
<p>more content</p>
<br>
<br>
<br> <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer"> Close
Save changes
</div>
</div>
</div>
</div>
<div class="modal fade rotate" id="myModal2">
<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">Modal 2</h4>
</div>
<div class="container"></div>
<div class="modal-body">Content for the dialog / modal goes here.
<br>
<br>
<p>come content</p>
<br>
<br>
<br> <a data-toggle="modal" href="#myModal3" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer"> Close
Save changes
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal3">
<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">Modal 3</h4>
</div>
<div class="container"></div>
<div class="modal-body">Content for the dialog / modal goes here.
<br>
<br>
<br>
<br>
<br> <a data-toggle="modal" href="#myModal4" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer"> Close
Save changes
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal4">
<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">Modal 4</h4>
</div>
<div class="container"></div>
<div class="modal-body">Content for the dialog / modal goes here.</div>
<div class="modal-footer"> Close
Save changes
</div>
</div>
</div>
</div>
Check this jsfiddle:http://jsfiddle.net/CxdUQ/
I'm trying to setup a modal that has a an image and text strictly on the left side with a border around it with also a button also inline with the image and text on the left hand side with a border around it as well. From there I'm trying to put links on the left side of the image/text/button so that it's symmetrical. I'm having trouble though getting the border to stay only around the image and have the text word-wrap under the image. This is currently what I've been creating:
HTML:
<!-- Button trigger modal --> <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<!-- 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-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<div class="content" style="word-wrap">
<img class="img-responsive" src="https://www.gl.ciw.edu/sites/www.gl.ciw.edu/files/users/pwoodard/microbiology.jpg" alt="image" />
<p float:left;>This is the text. This is the text. This is the text. This is the text. This is the text. This is the text. This is the text. This is the text.</p>
<button type="button" class="btn btn-primary" data-dismiss="modal" align="center">$4500</button>
</div>
</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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
CSS:
.content {
padding: 10px 10px 10px 10px;
position: left;
border:1px solid gray;
outline: thin;
}
http://jsfiddle.net/wan4q/11/
I think you can
Create the class only for the image and specify the border on it.
Using javascript you can set the container width to be equal to the width of the image.
Have your text and the image is the same div so that the text wraps according to the size of you parent div.
JSFiddle
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<!-- 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-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="wrap">
<img class="img-responsive bordered-image" src="https://www.gl.ciw.edu/sites/www.gl.ciw.edu/files/users/pwoodard/microbiology.jpg" alt="image"/>
<div class="content">
<p style="float:left;">
This is the text.
This is the text.
This is the text.
This is the text.
This is the text.
This is the text.
This is the text.
This is the text.
</p>
<button type="button" class="btn btn-primary" data-dismiss="modal" align="center">$4500</button>
</div>
</div>
</div>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
JS :
(function() {
var img = new Image();
var $mydiv = $('.wrap');
img.src = 'https://www.gl.ciw.edu/sites/www.gl.ciw.edu/files/users/pwoodard/microbiology.jpg';
$mydiv.width(img.width);
})();
CSS:
.content {
padding: 10px 10px 10px 10px;
position: left;
outline: thin;
}
.bordered-image{
border:1px solid gray;
}
.wrap {
display: inline-block;
position: relative;
}