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>
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>
I have 2 buttons next to each other. The first opens a modal with the data-target of #myModal and the second button opens it with the data-taget of #largeModalTwo. The problem is, the first works fine but clicking the 2nd button only dims the screen, it doesn't open any modal.
this is bootstrap 4, could this be a bug with it?
here is the codepen
<div id="fullWidthContButtons">
<div class="container-fluid centerthisouter" style="margin-top: 25px;">
<div class="page-header centerthisinner centerthisouter">
<button type="button" class="btn btn-primary modalLaunch" data-toggle="modal" data-target="#myModal">
<h3 class="title">test data</h3> <i class="fa fa-external-link open-seseme" aria-hidden="true"></i> </button>
</div>
</div>
<div class="container-fluid centerthisouter" style="margin-top: 25px;">
<div class="page-header centerthisinner centerthisouter">
<button type="button" class="btn btn-primary modalLaunch" data-toggle="modal" data-target="#largeModalTwo">
<h3 class="title">test data 2</h3> <i class="fa fa-external-link open-seseme" aria-hidden="true"></i> </button>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" 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">Load JSON</h4> </div>
<div class="modal-body centerthisouter">
<button type="button" class="btn btn-primary centerthisinner sm-margin" id="loadJson">Load JSON file to create table</button>
<table class="table table-striped" id="data_table" /> </div>
</div>
</div>
</div>
<div id="largeModalTwo" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content"> ... </div>
</div>
</div>
No bug in Bootstrap just a super minor error in your HTML. <table> properties are not self-closing in HTML, as you have in your first modal example. I think this was throwing off the modal JS from bootstrap because the element wasn't ever closed.
A minor code change in the modal body and you are good to go:
<div class="modal-body centerthisouter">
<button type="button" class="btn btn-primary centerthisinner sm-margin" id="loadJson">
Load JSON file to create table
</button>
<table class="table table-striped" id="data_table"></table>
</div>
Revised codepen:
http://codepen.io/staypuftman/pen/wzNVxP
A bootstrap modal in one of my sites is working perfect when i view it localy (the PDF is loading fine) but online although the modal is working the PDF is not diplayed.
Any ideas?
Thank you
<button type="button" class="btn btn-lg btn-outline" data-toggle="modal" data-target="#myModal">
<i class="fa fa-download"></i>Launch my CV
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" 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">CV</h4>
</div>
<div class="modal-body">
<embed id="modalembed" src="img/cv.pdf" data-backdrop="static" data-keyboard="false">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
Problem Description
I have two views. The first one contains a link, which when clicked, should display the second view which is my custom modal. Both files are in the same folder called school.
Code
firstView.html
<html>
<head>Click the link</head>
<body>
<div>
<a data-toggle="modal" href="secondView.html" data-target="#secondView" >Additional Details</a>
</div>
</body>
</html>
secondView.html
<!-- Modal -->
<div id="secondView" 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>
Issue at hand
The problem is that when I click on my link, it does not display anything. I checked the console, and it does not display any errors. So, I am thinking this has to do with the way I connect these two views, probably something to do with href tag.
I would appreciate your help folks.
From http://twitter.github.com/bootstrap/javascript.html#modals:
If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body.
So you'd do
firstView.html
<html>
<head>Click the link</head>
<body>
<div>
<a data-toggle="modal" href="secondView.html" data-target="#myModal" >Additional Details</a>
</div>
<!-- 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">
<!-- Here be modal content -->
</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>
</body>
</html>
secondView.html
<p>One fine body…</p>