Отображение всплывающего окна с фиксированным сообщением для URL-адресов с target = "_ blank"

У нас уже есть CSS, который добавляет значок "нового окна", указывая, что ссылка откроет новое окно:

a[target $="_blank"] {
 padding-right: 15px;
 background: transparent url(http://opi.mt.gov/Images/SiteWide/Icon_External_Link.png) no-repeat center right;
}

Наши юристы хотят получить всплывающее сообщение, в котором говорится о каком-то юридическом mumbo-jumbo для каждой внешней ссылки. К сожалению, у нас есть обширный веб-сайт, возможно, 10 000 внешних ссылок! Невозможно найти и коснуться каждой ссылки, чтобы добавить тег класса и т.д.

Есть ли способ изменить вышеприведенный код, чтобы сообщение появлялось при наведении, подобно типу "Alt" или "title"?

Заранее спасибо!

3 ответа

Если вы используете jQuery, вы можете добавить глобальную функцию для присоединения события click ко всем вашим внешним ссылкам на основе правильного селектора.

например:

$('a[target="_blank"]').click(function( event ) {
 event.preventDefault(); 
 var yesno = confirm("Legal! Sure you want to go to an external source?");
 if (yesno) window.open($(this).attr('href'));
});

Я уверен, что вы можете сделать то же самое с некоторым типом сообщения наведения. Просто зависит от того, как вы хотели бы это сделать. Я просто использовал диалог подтверждения в моем примере.


Вы можете сделать это также с помощью JavaScript, в зависимости от того, какое действие вы хотите сделать, если вы работаете на сенсорном устройстве, вы можете захотеть в диалоговом окне подтверждения. JSFiddle для здесь.

var myLinks = document.querySelectorAll('a[target $="_blank"]');
for (var i = 0, length = myLinks.length; i < length; i++) {
 // You can listen for whatever you want, different for touch
 // so you might want to do it on click and do a confirm dialog
 myLinks[i].addEventListener('mouseover', handleLegal, false);
}
function handleLegal (e) {
 // Do what you want here.
 alert('Hi');
}


Возможно, вы можете использовать :after утверждения css, см. Http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

licensed under cc by-sa 3.0 with attribution.