Я использую букмарклет, который (очевидно) может быть вызван пользователем где угодно:
javascript:(function(){window.open('http://*****.com/***.html?url=
'+encodeURIComponent(window.location.href),'my_page_name',
'left=200,top=200,width=480,height=500,personalbar=0,
toolbar=0,scrollbars=1,resizable=1')})()
Как я могу сделать это как модальное окно, то есть без уродливых границ окна браузера - должен ли я использовать jquery или что-то подобное в URL-адресе закладки, и если да, то как?
Вы можете использовать подход, который использует Firebug Lite.
В основном вы вставляете внешний файл JS на свою страницу, когда вы нажимаете на закладку.
<a href="javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','PATH_TO_JS ','PATH_TO_ICON','BASE_URL','#startOpened');">My bookmark</a>
Просто измените BASE_URL, PATH_TO_JS и PATH_TO_ICON на то, что вам нужно.
Также не забудьте " http://" в BASE_URL, если вы не хотите использовать относительный путь.
Ваш внешний JS-файл может содержать скрипт, добавляющий элемент на страницу, которая находится над другими. Я рекомендую использовать CSS в Twitter Bootstrap, чтобы выяснить, как создать надежное модальное окно.
Изменить --
Чтобы помочь вам, я написал небольшое демо. Он состоит из 2-х файлов:
bookmark.html
<a href="javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','bookmark.js','','http://www.bijtel.com/stackoverflow/bookmark/','#startOpened');">Bookmark</a>
bookmark.js
(function() {
var script;
if(!window.jQuery) {
script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js";
document.body.appendChild(script);
}
(function check_if_loaded() {
if(!window.jQuery) {
setTimeout(check_if_loaded, 50);
} else {
(function($) {
var
$dark_bg = $('<div></div>').css({'z-index': '1000', 'background-color': '#000000', 'opacity': '0', 'position': 'absolute', 'width': '100%', 'height': '100%'}),
$iframe = $('<iframe></iframe>').css({'width': '100%', 'height': '100%', 'border': 1, 'overflow': 'hidden'}).prop({'src': 'http://bijtel.com/cv/', 'width': '100%', 'height': '100%', 'scrolling': 'no'}),
$close = $('<div></div>').css({'position': 'absolute', 'top': 0, 'right': 0, 'padding': '5px 10px', 'cursor': 'pointer', 'color': '#ffffff', 'font-size': '10pt', 'font-family': 'verdana'}).html('close ×');
$modal = $('<div></div>').css({'z-index': '1010', 'background-color': '#ffffff', 'opacity': '0', 'position': 'absolute', 'top': '10%', 'left': '10%', 'width': '80%', 'height': '80%', 'box-shadow': '7px 7px 5px #333'}).append($close, $iframe);
$('body').css({'padding': 0, 'margin': 0}).prepend($dark_bg, $modal);
$dark_bg.animate({'opacity':0.5}, 400);
$modal.animate({'opacity':1}, 400);
$close.on('click', function() {
$dark_bg.animate({'opacity': 0}, 400, function(){ $dark_bg.remove(); });
$modal.animate({'opacity': 0}, 400, function(){ $modal.remove(); });
});
}(window.jQuery));
}
}());
}());
Демонстрация по адресу: http://bijtel.com/stackoverflow/bookmark/.
Я не очень разбираюсь в этом вопросе, но, глядя на букмарклет delicious.com, я заметил некоторые параметры, ограничивающие отображаемые части окна браузера:
(function() {
f = 'http://www.delicious.com/save?url=' + encodeURIComponent(window.location.href) + '&title=' + encodeURIComponent(document.title) + '&v=5&';
a = function() {
if (!window.open(f + 'noui=1&jump=doclose', 'deliciousuiv5', 'location=yes,links=no,scrollbars=no,toolbar=no,width=550,height=550')) location.href = f + 'jump=yes'
};
if (/Firefox/.test(navigator.userAgent)) {
setTimeout(a, 0)
} else {
a()
}
})()
Я говорю о параметрах location, links, scrollbars и toolbar. Однако это не делает его модальным, и я сомневаюсь, что для этого есть функция (я предполагаю, что окна браузера независимы друг от друга). Но тем не менее они обеспечивают "более чистое" окно...
Обновление: перейдите по этой ссылке. По сути, букмарклет создает новый тег скрипта и добавляет его в тело. Я предполагаю, что вы можете делать в этом скрипте все, что захотите, в том числе создать диалоговое окно jQuery так, как вам нужно (фактически, этот букмарклет действительно использует jQuery, но он встроен в сам скрипт; см. источник).
Вот код. Я бы не стал использовать этот букмарклет сам (поскольку мне пришлось бы указывать свое имя пользователя/пароль в открытом виде), но это отправная точка для вас:
var e = document.createElement('script');
e.setAttribute('language', 'javascript');
e.setAttribute('src', 'http://t.rc.vc/delicious/js/delicious.js?username=***&password=***');
e.setAttribute('id', 'delicious_submitter');
document.body.appendChild(e);
void(0);
Заметки: в обоих примерах я удалил часть javascript: и отформатировал код для удобочитаемости.
