如何在jQuery中改变点击选项
how to alter the click option in jQuery?
首先我想声明我在jQuery方面很没用,所以我面临的问题是,我不知道如何编码点击此刻关闭弹出窗口,你需要点击按钮,但我想为弹出窗口关闭,当你点击它的外面,你可以看到这里的弹出http://doctorsafraid.tumblr.com/(点击三角形然后链接)。
脚本如下:
<script>
$(document).ready(function() {
//
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://i60.tinypic.com/r720j6.png" class="btn_close" alt="close" /></a>');
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend;
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() + 90) / 2;
var popMargLeft = ($('#' + popID).width() + 90) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .thepopup').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
我应该修改什么?
也许这对你有用。我使用类似的东西,但没有jQuery;)
function closePopup(e) {
// Close the popup here
// Remove the listener to prevent problems
$('html, body').unbind('click', closePopup);
}
$('a.poplight[href^=#]').click(function () {
// Your code here
// Add click evenetlistener on hole page
$('html, body').click(closePopup);
});
// Prevent the listener for the hole page
$("#popupContainer").click(function (e) {
e.stopPropagation();
});
这是我编辑的版本。它包含您的代码。
<script>
$(document).ready(function () {
//
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function () {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query = popURL.split('?');
var dim = query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number(popWidth) }).prepend('<a href="#" class="close"><img src="http://i60.tinypic.com/r720j6.png" class="btn_close" alt="close" /></a>');
$('#' + popID).fadeIn().css({ 'width': Number(popWidth) }).prepend;
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() + 90) / 2;
var popMargLeft = ($('#' + popID).width() + 90) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top': -popMargTop,
'margin-left': -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({ 'filter': 'alpha(opacity=80)' }).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
// add click listener to hole page
$('html, body').click(closePopup);
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', closePopup);
// Prevent the listener for the hole page
$("#popupContainer").click(function (e) {
e.stopPropagation();
});
function closePopup(e) {
$('#fade , .thepopup').fadeOut(function () {
$('#fade, a.close').remove(); //fade them both out
});
$('html, body').unbind('click', closePopup);
return false;
}
});
</script>
相关文章:
- 如果选项值是“改变列表不起作用”;真的”;
- 改变砖石结构's columnWidth选项
- jquery改变了选择上的选项,但Chrome却出现了奇怪的结果
- HTML/JS:如何使用JS改变select type的选项值
- jQuery在选择选项时不改变文本
- JQuery . .改变焦点悬停状态&限制键盘导航选项卡区域
- JQuery UI选项卡选择的背景不改变javascript
- Jquery ui-tabs改变选定的选项卡背景颜色
- 从控制器的下拉选项中获取变量,以改变Angular工厂中的另一个选项
- AngularJS改变选择选项
- JQuery移动改变属性的每个选项在多个选择使用JavaScript
- 当改变背景颜色的html选择,第一个选项改变它
- 改变,到.输入/选项卡上
- 我想改变行为,甚至当一个选项没有改变下拉jquery
- 根据选择选项改变jQuery UI滑块值
- CSS停止下拉选项改变大小
- 如何用2个选项改变HTML表单到Javascript
- Chrome选择输入点击事件选项(改变不做我需要的)
- 当选择选项改变时执行脚本
- 当选择选项改变时,Knockoutjs模型不会更新