I have a Modal in my webpage which uses Bootstrap. I've added anchor tags in it to which there are href links. When I am trying to click on that anchor element, it is not clickable. Anchor tag is not working in Modal.
Please help me with this issue.
Please find below code -
<div class="portfolio-modal modal fade" id="editionsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="col-sm-3">
<a href="hingoli.html" data-target="#" style="text-decoration: none;">
<div style="padding:15px; color:#181818; text-align: center; ">
<h4>Hingoli</h4>
</div>
<img src="pages/hingoli/1.jpg" style="margin: 0 auto; display: block;" class="modal-img" alt="">
</a>
</div>
<div class="col-sm-3">
<a href="parbhani.html" class="portfolio-link" style="text-decoration: none;">
<div style="padding:15px; color:#181818; text-align: center; ">
<h4>Parbhani</h4>
</div>
<img src="pages/parbhani/1.jpg" style="margin: 0 auto; display: block;" class="modal-img" alt="">
</a>
</div>
<div class="modal-body">
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
I was having the same behaviour with Bootstrap 4 and it turns out that .modal-dialog div has a pointer-events: none; attribute that disables the links. Setting to pointer-events: all; fixed it for me.
try this
$("#yourModalID table tbody").on('click','.yourBtnClass', function(){ //do something here })
Check it, I used clearfix div. but if I don't want clearfix, then I use
(div class="modal-body col-sm-3") because link divs have a float value
but modal-body doesn't.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#editionsModal">Open Modal</button>
<div class="portfolio-modal modal fade" id="editionsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="col-sm-3">
<a href="hingoli.html" data-target="#" style="text-decoration: none;">
<div style="padding:15px; color:#181818; text-align: center; ">
<h4>Hingoli</h4>
</div>
<img src="pages/hingoli/1.jpg" style="margin: 0 auto; display: block;" class="modal-img" alt="">
</a>
</div>
<div class="col-sm-3">
<a href="parbhani.html" class="portfolio-link" style="text-decoration: none;">
<div style="padding:15px; color:#181818; text-align: center; ">
<h4>Parbhani</h4>
</div>
<img src="pages/parbhani/1.jpg" style="margin: 0 auto; display: block;" class="modal-img" alt="">
</a>
</div>
<div class="clearfix"></div>
<div class="modal-body">
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Please try this code!
$('#editionsModal .container a').on('click',function( ev){
var $button=$(ev.target);
ev.preventDefault();
$(this).closest('.modal').on('hidden.bs.modal',function(e){
var $href=$button.attr('href');
window.location.href=$href;
});
});
Related
I'm trying to create a modal but it opens when i´m in the base domain, for example:
The modal opens in the www.example.com
but not open in the
www.example.com/index.php/cart/index and I dont know why
<div id="myModal" class="modal fade">
<div class="modal-dialog" 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>Select your language</h4>
</div>
<!--<section>-->
<div class="modal-body">
<div class="col-md-4">
<img width=128px height=128px src="https://image.flaticon.com/icons/png/128/323/323329.png" alt="" class="img-responsive none" style='object-fit: contain'/>
<p>English</p>
</div>
<div class="col-md-4">
<img width=128px height=128px src="https://image.flaticon.com/icons/png/128/323/323329.png" alt="" class="img-responsive none" style='object-fit: contain'/>
<p>English</p>
</div>
<div class="col-md-4">
<img width=128px height=128px src="https://image.flaticon.com/icons/png/128/323/323329.png" alt="" class="img-responsive none" style='object-fit: contain'/>
<p>English</p>
</div>
<div class="tab_img">
<div class="container" style='height: 100%; width: 100%; object-fit: contain'>
<div class="overlay">
</div>
</a>
</div>
</div>
</div>
</div>
<!--</section>-->
</div>
</div>
</div>
</div>
the script that activate the modal
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>{/literal}
{literal}<script>
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
have you checked in the Routes.php?
$routes->get('/', 'Cart::index');
hope this will solved your problem.
Try to check your base_url() in the config.php.
Probably the problem is that you are not loading the css correctly.
I want to click a photo, then it will zoom in.
Like this website --> https://mobirise.com/bootstrap-gallery/
But I just need one photo to zoom in only. Not a photo gallery. Please help.
<img src="images/uploads/phs.jpg"></img>
in my last project, i have used this i hope its help you try this demo:
http://jsfiddle.net/6CR2H/1/
<a href="#" class="pop">
<img src="http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg" style="width: 400px; height: 264px;" class="img-responsive">
</a>
<a href="#" class="pop">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" style="width: 400px; height: 264px;">
</a>
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" data-dismiss="modal">
<div class="modal-content" >
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" class="imagepreview" style="width: 100%;" >
</div>
<div class="modal-footer">
<div class="col-xs-12">
<p class="text-left">1. line of description<br>2. line of description <br>3. line of description</p>
</div>
</div>
</div>
</div>
</div>
javascript code:
$(function() {
$('.pop').on('click', function() {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
I want my div col-md-9 to have a height the same as the content in my first div col-md-3's contents.
I also want my div col-md-9's button inside to be the same height as the col-md-3's content.
I'd like the text on the button to fill the button also.
How do I accomplish this?
<div class="row" style="height:300px;">
<div class="col-md-3">
<div class="thumbnail">
<a href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<img src="#(Url.Content("~/Images/LIJayCow-135.png"))" alt="Download Timer App" />
</a>
<div class="caption">
<p>Run the Timer App on your computer to keep track of your time.</p>
<a class="btn btn-primary" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-download"></span> Download
</a>
</div>
</div>
</div>
<div class="col-md-9" style="height:300px; background: #f0e68c">
<div class="thumbnail" style="width:100%; height:300px">
<a class="btn btn-block btn-primary" style="display: block; width: 100%; height:100%; font-size:large" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-share"> LIRA</span>
</a>
</div>
</div>
</div>
All you have to do is change the div with the class "row" to the height you want.
<div class="row" style="height:300px;">
<div class="col-md-3" style="height:100%">
<div class="thumbnail" style="width:100%; height:100%">
<a href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<img src="#(Url.Content("~/Images/LIJayCow-135.png"))" alt="Download Timer App" />
</a>
<div class="caption">
<p>Run the Timer App on your computer to keep track of your time.</p>
<a class="btn btn-primary" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-download"></span> Download
</a>
</div>
</div>
</div>
<div class="col-md-9" style=" background: #f0e68c;height:100%">
<div class="thumbnail" style="width:100%; height:100%;">
<a class="btn btn-primary" style="" href="#(Url.Content('~/ProjectTimer/LITL.DesktopTimer.application'))">
<span class="glyphicon glyphicon-share"> LIRA</span>
</a>
</div>
</div>
</div>
Are you looking for a result like this?
Codepen: link
<div class="row" style="height:300px;">
<div class="col-md-3">
<div class="thumbnail">
<a href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))" >
</a>
<div class="caption" style="height:300px;">
<p>Run the Timer App on your computer to keep track of your time.</p>
<a class="btn btn-primary" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-download"></span> Download
</a>
</div>
</div>
</div>
<div class="col-md-9" style="height:300px; background: #f0e68c">
<div class="thumbnail" style="width:100%; height:300px">
<a class="btn btn-block btn-primary" style="display: block; width: 100%; height:100%; font-size:large" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-share" style="font-size: 300px;">LIRA</span>
</a>
</div>
</div>
</div>
Just use the btn-block class, like this:
<div class="col-md-3"><button class="btn btn-block" >Show Details</button></div>
The issue is that the button is 100% height when using h-100, the solution is to set the form element to 100% also.
So it'll look like this:
#using(Html.BeginForm("Action","Controller", FormMethod.Post, new { #class = "h-100" }) {
<button class="h-100">Button</button>
}
I've style border: 1px solid black; to determine if it is correct box, but it overlap and goes outside. This is my html
<div class="panel panel-default">
<div class="panel-body">This page is temporarily disabled by the site administrator for some reason.</div>
<div class="panel-footer clearfix">
<p>Drink whaterver jklasd jklasd jklnxm,c kasdk jj jjjjs lasd jklasd m,zxc asd kljaskd kljasd kl</p>
<div style="border: 1px solid black; display: block;" class="pull-left">
<div class="row">
<p>By Jerald Patalinghug</p>
</div>
<div class="row">
Tags: Funny, Wtf, Nice
</div>
</div>
<div style="border: 1px solid black;" class="pull-right">
<div id="votes">
<div class="row">
<a href="#" data-card_id="26" class="vote upvote btn btn-default">
<span class="fa fa-thumbs-up"></span>
</a>
<a href="#" data-card_id="26" class="vote downvote btn btn-default">
<span class="fa fa-thumbs-down"></span>
</a>
</div>
<div class="row">
<center>
<span class="vote_count">1</span> points
</center>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
and this is the image
look, the inside of div.pull-left are going outside.
EDIT1
Thanks guys, What I did was remove class="row" on every div
<div class="panel panel-default">
<div class="panel-body">This page is temporarily disabled by the site administrator for some reason.</div>
<div class="panel-footer clearfix">
<p>Drink whaterver jklasd jklasd jklnxm,c kasdk jj jjjjs lasd jklasd m,zxc asd kljaskd kljasd kl</p>
<div style="border: 1px solid black; display: block;" class="pull-left">
<div>
<p>By Jerald Patalinghug</p>
</div>
<div>
Tags: Funny, Wtf, Nice
</div>
</div>
<div style="border: 1px solid black;" class="pull-right">
<div id="votes">
<div>
<a href="#" data-card_id="26" class="vote upvote btn btn-default">
<span class="fa fa-thumbs-up"></span>
</a>
<a href="#" data-card_id="26" class="vote downvote btn btn-default">
<span class="fa fa-thumbs-down"></span>
</a>
</div>
<div>
<center>
<span class="vote_count">1</span> points
</center>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
Remove the
<div class="row">
inside each of the bordered div's - these are adding -15px to the left and right. These are only to be used when you are nesting inside .container or .col-sm-12 (for example).
This is a good read if you're not 100% sure on how the bootstrap grid works:
http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
Use class container-fluid along with pull-left/pull-right.
Solution:
<div class="panel panel-default">
<div class="panel-body">This page is temporarily disabled by the site administrator for some reason.</div>
<div class="panel-footer clearfix">
<p>Drink whaterver jklasd jklasd jklnxm,c kasdk jj jjjjs lasd jklasd m,zxc asd kljaskd kljasd kl</p>
<div style="border: 1px solid black; display: block;" class="pull-left container-fluid">
<div class="row">
<p>By Jerald Patalinghug</p>
</div>
<div class="row">
Tags: Funny, Wtf, Nice
</div>
</div>
<div style="border: 1px solid black;" class="pull-right container-fluid">
<div id="votes">
<div class="row">
<a href="#" data-card_id="26" class="vote upvote btn btn-default">
<span class="fa fa-thumbs-up"></span>
</a>
<a href="#" data-card_id="26" class="vote downvote btn btn-default">
<span class="fa fa-thumbs-down"></span>
</a>
</div>
<div class="row">
<center>
<span class="vote_count">1</span> points
</center>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
Apply padding in style to have nice look
<div style="border: 1px solid black;padding: 2%; display: block;" class="pull-left container-fluid">
<div style="border: 1px solid black;padding: 2%" class="pull-right container-fluid">
I am trying to build a two column layout in a bootstrap modal. This is the code:
<div class="modal fade in" id="product-showcase-modal" tabindex="-1" role="dialog" aria-labelledby="product-showcase" aria-hidden="false" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="container col-xs-12">
<div class="row-fluid">
<div class="col-xs-6">
<img src="http://localhost/haya/img/hijabs/dark%20grey.jpg" id="product_image" width="200px" height="auto" style="display: inline;">
</div>
<div class="col-xs-6">
<h3 id="product_name">Dark Gray</h3>
<p id="new_price">$3.00</p>
<p style="text-decoration: line-through;" id="old_price">$4.35</p>
<button class="btn btn-warning">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
And this is the result:
I have no idea why is this happening. Can anyone resolve this?
UPDATE 1:
I removed the col-xs-12 class from the container div. Now the container is in the modal's body but it's has taken a width of 100% (my screen's width). Result:
Just need to add a clearfix to the modal-body. This will fix the float item issue where the container doesn't fully expand.
Fiddle: http://jsfiddle.net/52VtD/6310/
<div class="modal-body clearfix">