I am trying to make a box pop up when i click on it. Here is the HTML for the boxes:
<div id="content_1">
<p>Hello</p>
<p>Please push the button</p>
<p><input type="button" id="go_button" value="Go"/> </p>
</div>
<div id="box">
<p>hello</p>
</div>
Here is the JavaScript and CSS:
$(document).ready(function() {
$("#content_2").on("click",function(){
.css("z-index",3);
}
}
Here is the styling just in case it's needed:
#go_button {
}
#content_1 {
margin:20px auto;
position:fixed;
width:1000px;
text-align:center;
border:1px solid #d0d0d0;
box-shadow:1px 1px 5px #aaa;
border-radius:15px;
background:#99FF99;
z-index:3;
}
#box {
position:fixed;
top:100px;
left:300px;
z-index:1;
width:600px;
height:300px;
background:green;
}
body {
background:#f7f7f7;
}
You cannot call a method chain without anything to start it. We don't see an element with the id content_2
in your markup. Perhaps you mean to apply this to #content_1
.
$(document).ready(function() {
$("#content_2").on("click",function(){
// Apply to this
$(this).css("z-index",3);
});
});
If the CSS is to be applied to some other element rather than content_2
( this
), use its selector instead.
$(document).ready(function() {
$("#content_2").on("click",function(){
$('#box').css("z-index",3);
});
});
Note that unless you have specified position: absolute
or position: fixed
, that z-index
won't have any effect.
Try this
$(document).ready(function() {
$("#content_2").on("click",function(){
$(this).css("z-index",3);
}
}
It looks like you aren't applying the css to anything:
$(document).ready(function() {
$("#content_2").on("click",function(){
$('#box').css("z-index",3);
}
}
Also, #content_2
isn't defined.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.