[英]Why my dialog box isn't working out?
I'm making a dialog box by my own coding as i run this code nothing happens and neither my signup!!
我正在用自己的代码创建一个对话框,因为我运行此代码没有任何反应,也没有
signup!!
link is working, My Approach is just like when i click to signup!!
链接有效,我的方法就像我单击
signup!!
link, a modal box should appear, but nothing happens such this, My Jquery library is in correct path so it has to deal nothing with this.. 链接,应该出现一个模式框,但不会发生任何此类情况,我的Jquery库位于正确的路径中,因此它无需对此进行任何处理。
Here is my pic when i run my code it directly shows modal box without clicking signup!!
这是我的图片,当我运行代码时,无需单击
signup!!
即可直接显示模式框signup!!
link: click here 链接: 点击这里
Why is my dialog box not working? 为什么我的对话框不起作用?
Here is my source code: 这是我的源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a.dialog-window').click(function(){
var signUpBox=$(this).attr('href');
$(signUpBox).fadeIn(400);
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
$('a.close, #mask').live('click', function(){
$('#mask, .dialog_box').fadeOut(400, function(){
$('#mask').remove();
});
return false;
});
});
</script>
<style>
.dialog_box{
width: 70%;
height: 70%;
background-color: #520832;
position: fixed;
left: 15%;
top: 15%;
-moz-box-shadow: -1px 0px 38px #520832;
-webkit-box-shadow: -1px 0px 38px #520832;
box-shadow: -1px 0px 38px #520832;
}
.close{
position: fixed;
right: 14%;
top: 10%;
}
</style>
</head>
<body>
<a href="#dialog" class="dialog-window">Signup!!</a>
<div id="dialog" class="dialog_box">
<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
<h2 style="color: #E2E2E2; font-family: Aileron, sans-serif; text-align: center;">Signup Now!</h2>
<form method="post" class="signUp" action="#">
</form>
</div>
</body>
</html>
You're not telling the browser that your dialog box shouldn't be visible before the link is clicked. 您没有在单击链接之前告诉浏览器您的对话框不可见。 Add
display: none;
添加
display: none;
to the dialog box's CSS rule. 对话框的CSS规则。 Like this:
像这样:
.dialog_box
{
width: 70%;
height: 70%;
background-color: #520832;
position: fixed;
left: 15%;
top: 15%;
-moz-box-shadow: -1px 0px 38px #520832;
-webkit-box-shadow: -1px 0px 38px #520832;
box-shadow: -1px 0px 38px #520832;
display: none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.