我一直在设置jQuery块UI时遇到困难。它似乎没有工作(即模态开放_我似乎无法确定我犯了错误。这是我到目前为止所做的:http://jsfiddle.net/4vJLN/。
我的代码如下:
JS
$(document).ready(function () {
$('.windowClass').click(function () { // <-- bind to all window elements with that class
$.blockUI({
message: $('#' + this.id + '_win'),
css: {
top: ($(window).height() - 400) /2 + 'px',
left: ($(window).width() - 600) /2 + 'px',
width: '600px',
height: '400px'
}
});
});
$('[id$=_close]').click(function () { //<-- gets all elements with id's that end with close
$.unblockUI();
return false;
});
});
$(window).on('resize', function () {
$('body').children('.blockMsg').css({
top : ($(window).height() - 400) /2 + 'px',
left : ($(window).width() - 600) /2 + 'px'
});
});
HTML
<div id="forgotpass_link" class="modal">
<div class="modal_headerwrapper">
<div class="modal_header">Get started with a free account</div>
<div class="modal_close">Close</div>
</div>
<div class="modal_bodywrapper">
<div class="modal_body">ddd</div>
</div>
</div>
<a class="windowClass" id="forgotpass_link">Forgot your password?</a>
CSS
#forgotpass_link {
color: #306;
}
#forgotpass_link:hover {
color: #C06;
cursor: pointer;
}
.modal {
display: none;
cursor: default;
}
.modal_headerwrapper {
width: 100%;
background-color: #eeeeee;
height: 45px;
}
.modal_header {
float: left;
font-size: 20px;
padding: 10px;
}
.modal_bodywrapper {
width: 100%;
}
.modal_body {
padding: 15px;
font-size: 12px;
cursor: default;
line-height: 1.5em;
overflow: auto;
height: 325px;
text-align: justify;
}
.modal_close {
cursor: pointer;
float: right;
padding: 10px;
}
提前致谢
答案 0 :(得分:1)
我在document.ready函数中更改了一些代码,close链接有一个不是ID的类:
$(document).ready(function () {
$('.windowClass').click(function () { // <-- bind to all window elements with that class
$.blockUI({
message: $('#' + this.id + '_win'),
css: {
top: ($(window).height() - 400) /2 + 'px',
left: ($(window).width() - 600) /2 + 'px',
width: '600px',
height: '400px'
}
});
});
$('[class$=_close]').click(function () { //<-- gets all elements with class that end with close
$.unblockUI();
return false;
});
});
在html中,我正确设置了模态窗口的ID:
<div id="forgotpass_win" class="modal">
<div class="modal_headerwrapper">
<div class="modal_header">Get started with a free account</div>
<div class="modal_close">Close</div>
</div>
<div class="modal_bodywrapper">
<div class="modal_body">ddd</div>
</div>
</div>
<a class="windowClass" id="forgotpass_link">Forgot your password?</a>
这是一个工作小提琴http://jsfiddle.net/4vJLN/4/。