javascript - 带有按钮的Jquery Onclick不显示窗口

Question

对不起我的英语......我对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 链接

有人可以帮助我并用简单的单词解释我做错了什么吗？

score 1 · Accepted Answer

问题在于您如何尝试处理onclick按钮上的事件，而不考虑该按钮是form

简而言之，每当在button表单内按下 a 时，如果未另行声明，它就会尝试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();

这将覆盖表单内按钮的默认功能。

javascript - 带有按钮的Jquery Onclick不显示窗口

1 回答 1

Related

Reference