在我的页面上点击以下链接时无效：
<a href="www.youtube.com">Go to youtube</a>
我不确定为什么这是因为如果你右键点击它并告诉它在新窗口中打开它可以正常工作。我有一种感觉问题出在Javascript的某个地方，但我无法看到哪里，我不知道如何解决它。我的其余代码如下：
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modality jQuery PluginExample</title>
<link rel="stylesheet" href="css/modality.css">
</head>
<body>
<h1>Modality jQuery PluginExample</h1>
<!-- The trigger to open the modal -->
<a href="#yourModalId">Open Modal</a>
<!-- Your Modal, style it however you will! -->
<div id="yourModalId" style="display:none;">
<div id="toppop">
<div id="poptitle">Modality</div>
<div id="popclose"><a href="#yourModalId">Close</a></div>
<div id="toppopfooter"></div>
</div>
<style media="screen" type="text/css">
.modality-modal.mm-show {
background: rgba(250, 21, 139, 0.5);
opacity: 1;
visibility: visible;
z-index: 10000;
}
</style>
<br>
<a href="www.youtube.com">Go to youtube</a>
</div>
<script src="js/modality.js"></script>
<script>
var modal1 = Modality.init('#yourModalId', {
effect: 'slide-up'
});
</script>
</body>
</html>
CSS
*{
background-color: #000;
}
.modality-modal {
background: rgba(0, 0, 0, 0);
bottom: 0;
left: 0;
opacity: 0;
overflow: auto;
position: fixed;
right: 0;
text-align: center;
top: 0;
visibility: hidden;
*zoom: 1;
-moz-transition: all 0.25s;
-webkit-transition: all 0.25s;
transition: all 0.25s;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
.mm-wrap {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
*display: inline;
max-width: 94%;
text-align: left;
vertical-align: middle;
z-index: 10000;
*zoom: 1;
opacity: 0;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.modality-modal:before, .mm-ghost {
content: '';
display: inline-block;
*display: inline;
height: 100%;
margin-right: -0.25em;
vertical-align: middle;
*zoom: 1;
}
.modality-modal.mm-show .mm-wrap {
opacity: 1;
}
body.mm-show { overflow: hidden; }
.yourModalClass {
background-color: #000000;
border: 6px solid #FFF;
width: 1044px;
height: 742px;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
.yourModalClass #toppop {
width: 1044px;
height: 47px;
}
.yourModalClass #toppop #poptitle {
width: 999px;
height: 47px;
float: left;
font-size: 42px;
padding-top: 6px;
text-indent: 12px;
}
.yourModalClass #toppop #popclose {
width: 45px;
height: 47px;
float: left;
}
.yourModalClass #toppop #toppopfooter {
width: 1044px;
clear: both;
}
.yourModalClass #WebImage {
width: 1044px;
height: 350px;
text-align: center;
}
.yourModalClass #WebDescription {
width: 1044px;
height: 345px
}
/* Effect 1 & 2: scale up and down */
.scale-up .mm-wrap {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
}
.scale-down .mm-wrap {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}
.mm-show.scale-up .mm-wrap,
.mm-show.scale-down .mm-wrap {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
的Javascript
;(function () {
var _name = "Modality",
_body = document.querySelector('body'),
_defaults = {
autoBind: true,
clickOffToClose: true,
closeOnEscape: true,
effect: "",
innerClass: "mm-wrap",
modalClass: "modality-modal",
onClose: "",
onOpen: "",
openClass: "mm-show",
openOnLoad: false,
userClass: ""
},
_extend = function () {
var a = arguments;
for( var i = 1; i < a.length; i++ )
for( var key in a[i] )
if(a[i].hasOwnProperty(key))
a[0][key] = a[i][key];
return a[0];
},
_addEvent = function( target, event, fn ) {
if ( target.attachEvent ) {
target['e'+event+fn] = fn;
target[event+fn] = function(){ target['e'+event+fn]( window.event ); }
target.attachEvent( 'on'+event, target[event+fn] );
} else {
target.addEventListener( event, fn, false );
}
},
hasClass = function( target, className ) {
return target.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));
},
addClass = function( target, className ) {
for( var i = 0; i < target.length; i++ )
if( ! hasClass( target[i], className ) )
target[i].className += " " + className;
},
removeClass = function( target, className ) {
for( var i = 0; i < target.length; i++ ) {
if( hasClass( target[i], className ) ) {
var re = new RegExp("(\\s|^)" + className + "(\\s|$)", "g");
target[i].className = target[i].className.replace(re , '');
}
}
},
_wrap = function ( element, settings ) {
var container = document.createElement('div');
container.setAttribute( 'class', settings.modalClass + ' ' + settings.effect + ' ' + settings.userClass );
container.innerHTML = '<div class="'+settings.innerClass+'">' + element.outerHTML + '</div>';
element.parentNode.replaceChild( container, element );
return container;
},
Modality = function ( element, options ) {
var inst = this;
inst.defaults = _defaults;
inst.id = element.getAttribute( 'id' );
inst.settings = _extend( {}, _defaults, options );
inst.wrapper = _wrap( element, inst.settings );
inst.triggers = document.querySelectorAll( 'a[href="#'+inst.id+'"], [data-modality="#'+inst.id+'"]' );
inst.modal = document.getElementById( inst.id );
if( inst.settings.autoBind ) {
for( var i = 0; i < inst.triggers.length; i++ )
inst.setTrigger( inst.triggers[i] );
}
if( inst.settings.clickOffToClose ) {
_addEvent( inst.wrapper, "click", function(e) {
e.preventDefault(); if(e.target == inst.wrapper) inst.close();
}, false );
}
if( inst.settings.closeOnEscape ) {
_addEvent( _body, "keyup", function (e) {
if(e.keyCode == 27) inst.close();
}, false);
}
if( inst.modal.style.display == 'none' ) inst.modal.style.display = '';
if( inst.settings.openOnLoad ) inst.open();
return inst;
};
_extend( Modality.prototype, {
open: function ( callback ) {
addClass( [this.wrapper, _body], this.settings.openClass );
if ( typeof this.settings.onOpen == 'function' ) this.settings.onOpen();
if ( typeof callback == 'function' ) callback();
return this;
},
close: function ( callback ) {
removeClass( [this.wrapper, _body], this.settings.openClass );
if ( typeof this.settings.onClose == 'function' ) this.settings.onClose();
if ( typeof callback == 'function' ) callback();
return this;
},
toggle: function ( callback ) {
return ( this.isOpen() ) ? this.close(callback) : this.open(callback);
},
isOpen: function () {
return hasClass( this.wrapper, this.settings.openClass );
},
setTrigger: function ( trigger ) {
var inst = this; // set local var for instance
_addEvent( trigger, "click", function (e) {
e.preventDefault(); inst.toggle();
}, false );
return inst;
}
});
_extend( Modality, {
instances: {},
extend: _extend,
init: function ( query, options ) {
var a = {}, e = document.querySelectorAll(query);
for( var i = 0; i < e.length; i++ ) {
var inst = new this( e[i], options );
this.instances[ inst.id ] = a[i] = inst;
}
return ( a[1] === undefined ) ? a[0] : a;
}
});
window[ _name ] = Modality;
})();
答案 0 :(得分：0)
首先将http://放在锚点的url之前，以便让浏览器将您重定向到外部页面，如下所示：
<a href="http://www.youtube.com">Go to youtube</a>
回答您的问题，您的错误就在这里：
if( inst.settings.clickOffToClose ) {
_addEvent( inst.wrapper, "click", function(e) {
e.preventDefault(); if(e.target == inst.wrapper) inst.close();
}, false );
}
您正在阻止“关闭”锚点以及通过链接执行“转到Youtube”锚点
您可以执行以下操作来解决问题：
if( inst.settings.clickOffToClose ) {
_addEvent( inst.wrapper, "click", function(e) {
if(e.target == inst.wrapper) {
e.preventDefault();
inst.close();
}
}, false );
}
只是阻止'关闭'锚点