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.
Related
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>
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; }
Bootstrap modal out of order
As seen from the above image, you will get all knowledge what my problem is.
<span class="fa fa-eye"></span> View
<div class="modal fade" id="myModalView" role="document">
<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">View Details</h4>
</div>
<div class="modal-body">
<div class="row">
<h3>jgnsdvolsgnvolkfngoelkfsngvje;alfnvojfelsnvo;eaflsnboa;fljnbjdfbnkjdfbkjfbkjfbvjkfjvnsjfvjsanvjsnvjsvjnbskjvsfjvnsfjn</h3>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Try following code:
.wordwrapclass{
word-wrap: break-word;
}
<div class="row wordwrapclass">
<h3>jgnsdvolsgnvolkfngoelkfsngvje;alfnvojfelsnvo;eaflsnboa;fljnbjdfbnkjdfbkjfbkjfbvjkfjvnsjfvjsanvjsnvjsvjnbskjvsfjvnsfjn</h3>
</div>
try to add word-wrap:break-word rules to your modal-body class
I created a simple HTML with bootstrap 3.2 :
<body>
<div>
<a class="btn" href="#frmLogin" data-toggle="modal">login</a>
</div>
<div class="modal fade" id="frmLogin" role="dialog">
<div class="modal-dialog">
<div class="modal-content>">
<div class="modal-header">
<a class="btn" data-dismiss="modal">×</a>
<h3 id="modalTitle">Login</h3>
</div>
</div>
</div>
</div>
</body>
but the modal does not show correctly.
fiddle link : http://jsfiddle.net/jsmLxhv9/1/
I'm a little late to the party here, but I had the same issue, which lead me to this post. The issue with the posted code is that
<div class="modal-content>">
needs to be
<div class="modal-content">
Other than that, it works fine. Check it out here: http://jsfiddle.net/hjqo17dq/
<body>
<!-- Button trigger modal -->
<button class="btn" data-toggle="modal" data-target="#myModal">
Login
</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"><span aria-hidden="true">×</span><span class="sr-only">Close</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>
</body>