Open link in pop up

Question

Open link in pop up

Navigation

#1 by (0 votes)

0

The problem is that I have that code and it works well with paragraph image tags and a header, but with a link, it does not load, it only remains empty ...

	.img-contenedor { 	
		 	position: fixed; 	
		 	font-family: Arial, Helvetica, sans-serif; 	
		 	top: 0; 	
		 	right: 0; 	
		 	bottom: 0; 	
		 	left: 0; 	
		 	background: rgba(0,0,0,0.8); 	
		 	z-index: 99999; 	
		 	opacity:0; 	
		 	-webkit-transition: opacity 400ms ease-in; 	
		 	-moz-transition: opacity 400ms ease-in; 	
		 	transition: opacity 400ms ease-in; 	
		 	pointer-events: none; 
		 	} 
		 	
		 	.img-contenedor:target { 	
		 	opacity:1; 	
		 	pointer-events: auto; 
		 	} 
		 	
		 	.img-contenedor > div { 	
		 	width: 90%; 
		 	heigth: auto;	
		 	position: relative; 	
		 	margin: 30% auto; 	
		 	padding: 0px; 	
		 	border-radius: 10px; 	
		 	background: #fff; 	
		 	background: -moz-linear-gradient(#fff, #999); 	
		 	background: -webkit-linear-gradient(#fff, #999); 	
		 	background: -o-linear-gradient(#fff, #999); 
		 	-webkit-transition: opacity 400ms ease-in; 
		 	-moz-transition: opacity 400ms ease-in; 
		 	transition: opacity 400ms ease-in; 
		 	}
		 	.imagenropa a {
		 	width: 100%;
		 	position: relative;
		 	-webkit-border-radius: 9px; 	
		 	-moz-border-radius: 9px; 	
		 	border-radius: 9px; 	
		 	}
		 	.close { 	
		 	background: #606061; 	
		 	color: #FFFFFF; 	
		 	line-height: 25px; 	
		 	position: absolute; 	
		 	right: -12px; 	
		 	text-align: center; 	
		 	top: -10px; 	
		 	width: 24px; 	
		 	text-decoration: none; 	
		 	font-weight: bold; 	
		 	-webkit-border-radius: 15px; 	
		 	-moz-border-radius: 15px; 	
		 	border-radius: 15px; 	
		 	-moz-box-shadow: 1px 1px 3px #000; 	
		 	-webkit-box-shadow: 1px 1px 3px #000; 	
		 	box-shadow: 1px 1px 3px #000; 
		 	} 
		 	
		 	.close:hover { 
		 	background: #00d9ff; }

<a href="#imgZoom">
			<img src="link de mi sexi botón">
			</a>
			<div id="imgZoom" class="img-contenedor"> 	
			<div>		
			<a href="#close" title="Close" class="close">X</a> 		
			<div class="imagenropa"> 
			<a href="link que quiero quese abra pero no puedo porque tengo 8 dias apenas aprendiendo html"></a>
			 </div>
			</div> </div>

javascript html css

asked by Alst Adm 18.10.2018 в 02:33

source

1 answer

Images in databases and Laravel 5.6 create database in microsoft azure from code c #

score 0 · Accepted Answer

If you are working with Bootstrap you can use manners, I see that what you are looking for is to speed up your page by first showing thumbnail and not to call the original image until the user requests it.

You can try the following snippet, adapting it to your code and need.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<div class="container">

<div class="row">

<a href="#" data-toggle="modal" data-target=".pop-up-1">
<img src="http://i.imgur.com/YZ7AGyF.jpg" width="150" class="img-responsive img-rounded center-block" alt="">
</a>

<hr>

<!-- Thumbnail link for lion image -->
<a href="#" data-toggle="modal" data-target=".pop-up-2">
<img src="http://i.imgur.com/dtaHtds.jpg" width="150" class="img-responsive img-rounded center-block" alt="">
</a>


<!--  Modal content for the mixer image example -->
  <div class="modal fade pop-up-1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title" id="myLargeModalLabel-1">Mixer Board</h4>
        </div>
        <div class="modal-body">
        <img src="http://i.imgur.com/YZ7AGyF.jpg.jpg" class="img-responsive img-rounded center-block" alt="">
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal mixer image -->
 
 <!--  Modal content for the lion image example -->
  <div class="modal fade pop-up-2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-2" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title" id="myLargeModalLabel-2">Lion</h4>
        </div>
        <div class="modal-body">
        <img src="http://i.imgur.com/kzGVqbd.jpg" class="img-responsive img-rounded center-block" alt="">
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal mixer image -->
  
    
</div> <!-- /.row -->
</div> <!-- /.container -->

Source