I'm trying to display some pictures in my portfolio section on my website. On the background of the portfolio, you can see different pictures, but when i click "show details", it opens new window on same page, but pictures are both same, instead of different ...it displays pic1.png in both, instead of pic1.png and pic2.png.
Please help me out, it's driving me crazy.
This is my HTML code
<!-- PORTFOLIO IMAGE 1 -->
<div class="col-md-4 ">
<div class="grid mask">
<figure> <img class="img-responsive" src="assets/img/portfolio/slika1.png" alt="">
<figcaption>
<h5>UX / UI</h5>
<a data-toggle="modal" href="#myModal" class="btn btn-default">More Details</a> </figcaption>
<!-- /figcaption -->
</figure>
<!-- /figure -->
</div>
<!-- /grid-mask -->
</div>
<!-- MODAL SHOW THE PORTFOLIO IMAGE. In this demo, all links point to this modal. You should create
a modal for each of your projects. -->
<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">Project Title</h4>
</div>
<div class="modal-body">
<p><img class="img-responsive" src="assets/img/portfolio/slika1.png" alt=""></p>
<p>Content1</p>
<p><b>Visit Site</b></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- PORTFOLIO IMAGE 1 -->
<div class="col-md-4 ">
<div class="grid mask">
<figure> <img class="img-responsive" src="assets/img/portfolio/slika2.png" alt="">
<figcaption>
<h5>UX / UI</h5>
<a data-toggle="modal" href="#myModal" class="btn btn-default">More Details</a> </figcaption>
<!-- /figcaption -->
</figure>
<!-- /figure -->
</div>
<!-- /grid-mask -->
</div>
<!-- MODAL SHOW THE PORTFOLIO IMAGE. In this demo, all links point to this modal. You should create
a modal for each of your projects. -->
<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">Project Title</h4>
</div>
<div class="modal-body">
<p><img class="img-responsive" src="assets/img/portfolio/slika2.png" alt=""></p>
<p>Content2</p>
<p><b>Visit Site</b></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
Thank you guys
You need to have different IDs for the different modals:
change:
<div class="modal fade" id="myModal"
to
<div class="modal fade" id="myModal2"
on the second modal
also update link reference:
<a data-toggle="modal" href="#myModal2"
Related
I'm using Bootstrap 4.1 and bootstrap4-fullscreen-modal (https://github.com/basilebong/bootstrap4-fullscreen-modal).
I have written a html page with bootstrap and the browser shows it very well.
But when I import this page on the bootstrap4-fullscreen-modal using
$("#idCl").load("page.html");
the modal properly works but I see this:.
The page is composed in this way:
<div class="container-fluid"> <!-- Main container -->
<div class="row">
<div class="col-sm-5">
</div>
<div class="col-sm-2" id="id1">
</div>
<!-- Here there is the problem -->
<div class="col-sm-5" id="id2">
</div>
</div>
</div>
The problem is when the id1 div finishes and start with id2 div.
In addition, I have noted this: on chrome there is this problem, on safari the problem doesn't appear.
Have you a solution?
I have tried to zoom or reduce zoom but I see the white line only when I'm on "normal view" (100%).
The modal code is:
<div class="modal fade modal-fullscreen force-fullscreen" id="idClxViewCardModal" 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"></h4>
</div>
<div class="modal-body">
<div id="idCl">
</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 -->
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 provided the code below and Plunkr link as well.Modal doesn't display properly when I click the "Learn more" button the issue araises.Can someone tell me where exactly I went wrong.The details are provided below.Well, how about adding more details. Like, what are you trying to accomplish, how are you doing it, what difficulties you have found with the approach, another approaches you have tried, etc. In summary, without code isn't a good question neither is with just code. Search for the balance!
code: http://plnkr.co/edit/X8ReWNKXK9RLVvrzeTd5?p=info
<body ng-app="myApp">
<div class="container">
<div ng-controller="listCtrl">
<div class="well">
<h1>Welcome to ssrikanthpp</h1>
</div>
<div class="row">
<div class="col-sm-6" ng-repeat="x in data">
<div class="well well-sm">
<div class="row">
<div class="col-md-6">
<img ng-src="{{x.image_url}}"
class="img-rounded img-responsive well-image">
</div>
<div class="col-md-6">
<h4>{{x.type}}</h4>
<p><strong>Locations: </strong>{{x.locations}}</p>
<p><strong>Size: </strong>{{x.size}}</p>
<p><strong>Average Lifespan: </strong>{{x.lifespan}}</p>
<p><strong>Diet: </strong>{{x.diet}}</p>
<button class="btn btn-primary pull-right" data-toggle="model" target="#turtle-info">Learn more..</button>
</div>
</div>
<!-- row -->
</div>
<!-- well -->
</div>
<!-- col-xs-6 -->
</div>
<!-- model starts hre -->
<!-- Modal -->
<div id="turtle-info" 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>
<!-- model ends here -->
</div>
</div>
Sorry this isn't realy an answer but I can't post a comment because I just started ad SO.
Just rename target to data-target. That should solve the problem.
change this line
<button class="btn btn-primary pull-right" data-toggle="model" target="#turtle-info">Learn more..</button>
to
<button class="btn btn-primary pull-right" data-toggle="modal" target="#turtle-info">Learn more..</button>
and you should be good to go
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>
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