href標記工作不正常

，當你點擊我的網頁上點擊以下鏈接不工作：href標記工作不正常

<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; 


})();

來源

2015-01-31 Rob Horlacher

請創建一個[MCVE]（/ help/mcve）。 – Sumurai8 2015-01-31 22:39:56

它是否完全不遵循鏈接，或者它是否在當前窗口而不是新窗口中打開它？ – Barmar 2015-01-31 22:40:27

它並沒有遵循它。只有當您右鍵單擊鏈接時纔會打開它，並在新窗口中打開該鏈接。 – 2015-01-31 22:42:44

網絡所有的RST把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); 
}

只是爲了防止「關閉」錨點

來源

2015-02-01 01:06:21 juanscolari

href標記工作不正常

回答

相關問題