Jquery Если кнопка Onclick не отображает окно - PullRequest
Новая
       1

Jquery Если кнопка Onclick не отображает окно

0 голосов
/ 08 мая 2020

извините за мой Engli sh .. Я новичок с javascript ...

Я хочу, чтобы мой код Jquery открывал окно,

Вот мой код в javascript, Html и Css, 

function layer_show_3()
{
	$('#layerPreview-3').attr("style", "top:0px; height:"+$(document).height()+"px; width:"+$(window).width()+"px; display:inline;");
	
	
	var posTop=(($(window).height()/2)-(500/2))+$(document).scrollTop();
	if(posTop<0)
		posTop=0;
	$('#layerPreviewContent-3').attr("style", "top:"+posTop+"px;");
	
	$('#layerPreviewContent-3').show(600);
}


function layer_close_3()
{
	$('#layerPreviewContent-3').hide(300);
	$('#layerPreview-3').hide();
}
.kaufen {

 
   float: right;
   width: 45%;
   background-color:  #cccccc;
   padding-right: 10%;
   padding-bottom: 1%;
   margin-left: 3%;
   margin-top: 11%;
   padding-top: 1%;

}
.tittle-kaufen  {margin-left: 15%; font-weight: bold; width: 100%;   float: left; }
.preis {margin-left: 4%; font-weight: bold;  margin-top: 5%; float: left; }
.piece {float: right; font-weight: bold; padding-top: 20%; margin-right: 55%;  }

.quantity {
   float: left;
   margin-top: 5%;
   background-color: #eee;
   position: relative;
   width: 18%;
   overflow: hidden;
   margin-left: 3%;
   border: 1px solid #b3b3b3;
   margin-left: 9%;
}
.quantity input {
  margin: 0;
  text-align: center;
  width: 5%;
  padding: 0;
  float: right;
  color: #000;
  font-size: 1.5rem;
  border: 0;
  outline: 0;
  background-color:  #d9d9d9;
}
.quantity input.qty {
   position: relative;
   border: 0;
   width: 100%;
   padding: 0.625rem 1.5625rem 0.625rem 0.625rem;
   text-align: center;
   font-weight: 400; 
   font-size: 15px;
   border-radius: 0;
   background-clip: padding-box
 }
 .quantity .minus, .quantity .plus {
    line-height: 0;
    background-clip: padding-box;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-background-size: 0.375rem 1.875rem;
    -moz-background-size: 0.375rem 1.875rem;
    color: black;
   font-size: 1.25rem;
   position: absolute;
  height: 50%;
  border: 0;
  right: 0;
  padding: 0;
  width: 33%;
  z-index: 3
}
.quantity .minus:hover, .quantity .plus:hover {background-color: #dad8da}
.quantity .minus {bottom: 0}
.button_wrap {

    float: right;
    min-width: 75%;
    background-color: transparent;
    
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-attachment: scroll;
    background-image: none;
    background-size: auto;
    background-origin: padding-box;
    background-clip: border-box;
    font-family: 'Open Sans', sans-serif;
    color: #111;
    margin-right: 1%;
    padding-right: 1%;
 }
 .button_wrap_buttom {margin-top: 15%; margin-left: 6%; color: white; background-color:  #b3b3b3; padding: 3%;}
 .button_wrap_buttom:hover {background-color: #666666; }
 .form-basket {

  margin-top: 30px;
  margin-bottom: 0px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0 none;
  font-size: 100%;
  background: transparent;
  font-family: 'Open Sans', sans-serif;
  color: #111;
  font-size: 18px;
  line-height: 18px;
 }
 .addtobasket-container {

  padding: 0;
  margin: 0;
  border: 0;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0 none;
  font-size: 100%;
  background: transparent;
  font-family: 'Open Sans', sans-serif;
  color: #111;
  font-size: 1rem;
  line-height: 18px;
 }

  /*      ***** Anfang    Fenster 1 producut **** */

 #layerPreview-3		{position:absolute;z-index:1;display:none;top: 0px;left:0px;width:100%;height:100%;background-color:#fff; 
				 background-color: rgba(50, 50, 50, 0.5);
 }
 #layerPreviewContent-3{position:absolute;z-index:1;display:none;background-color:#dedee0; margin-top: 0px;left:50%;
				width:30%;
				margin-left:-250px;
				height:40%;
                
                -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
				-webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
                box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>


<div class="container">

  
  <div class="kaufen">

    <form class="form-basket" method="post"  enctype="multipart/form-data">
         <fieldset class="addtobasket-container">    
  
            <span class="tittle-kaufen">Rucksack aus Hanf Gelbe mit Zwei Riemen</span>
 
            <span class="preis"> Preis 40 &euro; </span>

            <span class="piece">Stück</span>
  
           <div class="quantity">

                           
                      <input type="button" value="+" class="plus">
                      <input type="number" step="1" max="99" min="1" value="1" title="Qty" class="qty" size="4">
                      <input type="button" value="-" class="minus">
           </div>
           <div class="button_wrap"  >
                 <button class="button_wrap_buttom" type="buttom"  onclick='layer_show_3();' ><span>Zum warenkorb hinzufügen</span></button>
           </div> 
         </fieldset> 
      </form>      
                        <!-- En el momento que se pulse sobre la capa transparente se cerrara -->
                   <div id="layerPreview-3" > </div>
                   <div id='layerPreviewContent-3'>
                       <!-- Mostramos el texto de cerrar para poder cerrar la ventana -->
                      <div id="tittel-text">Rucksack aus Hanf Gelbe <span id="closse-text"  onclick="layer_close-3();">Schließen</span></div>
                      <div  id="bild-text"><img  alt=""  src="photo/113.jpg"></div>
                        <div id="text-pruduct">
                        <p>Verfügbarkeit: <b>eine Menge</b></p>
                        <p>Zustellung innerhalb von: <b>1-2 Tage</b></p>
                         
                      </div>
                   </div>     

    </div>
  </div>

Моя проблема заключается в нажатии кнопки Botton Zum warenkorb hinzufügen ничего не отображается, когда должно открываться окно ..

Вот ссылка на JSFiddle для кода

Может ли кто-нибудь помочь мне и простыми словами объяснить, что я делаю неправильно?

1 Ответ

1 голос
/ 08 мая 2020

Проблема в том, как вы пытаетесь обработать событие onclick на кнопке, не принимая во внимание, что эта кнопка является частью form

Проще говоря, всякий раз, когда button нажимается внутри формы, он пытается submit эту форму через html post запрос, если не указано иное.

Итак, если вы хотите, чтобы это работало, вы можете сделать что-то вроде этого.

Измените это 

<button class="button_wrap_buttom" type="buttom"  onclick='layer_show_3();' ><span>Zum warenkorb hinzufügen</span></button>

на 

<button class="button_wrap_buttom" type="buttom"  onclick='layer_show_3(event);' ><span>Zum warenkorb hinzufügen</span></button>

, где event передается как parameter в layer_show_3 функцию.

Измените свой объявление функции 

function layer_show_3(event) { ... }

и добавить эту строку при запуске функции 

event.preventDefault();

, это переопределит функциональность кнопки по умолчанию внутри формы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...