Помогите создать кнопку всплывающего окна

doolo · №1

Собственно в готовых вариантах не нашел такого.
Нужно подгружать свою заранее заготовленную страничку.
По клику открывалось всплывающее html окно? при клике на крстик или рядом - закрывалось.

Такое возможно сделать или нет?

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

turbot · №2

doolo
Я же вам дал ссылку, где задавать вопросы по созданию: Custom Buttons

Собственно в готовых вариантах не нашел такого.

Например, из Блокнот в вкладке:

скрытый текст

В секцию код:

Выделить код

Код:

// Исправляем проблему с возможно имеющейся кирилицей во вкладке "help"
// https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Solution_1_–_escaping_the_string_before_encoding_it
function b64EncodeUnicode(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
        return String.fromCharCode('0x' + p1);
    }));
};
// html-код с вкладки "help"
var uri = "data:text/html;base64," + b64EncodeUnicode(self.Help);
// Так:
var openFeatures = "menubar=no,location=no,status=no,resizable,scrollbars,left=100,top=50,width=800,height=600";
window.open(uri, "", openFeatures);
// Или так
// var openFeatures = "chrome,centerscreen,dialog=no,resizable,titlebar,toolbar=no,width=800,height=600";
// var win = Services.ww.openWindow(null, uri, "", openFeatures, null);

в секцию справка (или помощь (не помню, как русской локализации)):

Выделить код

Код:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Моя страничка</title>
<head>
<style>
html {
  background-color: whitesmoke;
  font: message-box;
}
ul {
  background-image: linear-gradient(to right, lightgreen,transparent 85%);
  border-block-start: 1px solid transparent;
  border-block-end: 1px solid transparent;
  border-radius: 1em;
  border-image: linear-gradient(to right, transparent,rgba(0,0,0,.32) 10%,transparent 50%) 1 0 1 0!important;
  padding: 1em 2em;
}
li {
  list-style-type: none!important;
  padding: 2px 8px;
}
li:hover {
  background-image: linear-gradient(to right, rgba(168,168,168,.4),transparent 55%);
  border-radius: 3px;
}
a {
  color: black;
  font: message-box;
  font-size: 1.5em;
  font-weight: 600;
  
}
</style>
</head>
<body>
<ul>
Бла-бла-бла
<li >
<a href="https://www.google.com/ncr" target="_blank" title="Не нажимай! Это ловушка!">
Нажми меня!
</a>
</li>
</ul>
</body>

На скорую руку. Смотрите https://developer.mozilla.org/en-US/doc … indow/open, https://developer.mozilla.org/en-US/doc … en_windows и т.д., там же.

Отредактировано turbot (18-05-2016 10:43:54)

doolo · №3

Извиняйте, что не туда запостил.

Но эти варианты не подходят. Нужно POPUP окно - всплывающее. Без доп. вкладок/страничек.
С открывающейся вкладкой и сам могу сделать. Но это не то!

turbot · №4

doolo
Вы код-то из под спойлера пробовали? Или для кого я делал? Он именно нужное вам делает. Остальное читайте по ссылкам, что там же, под спойлером.

doolo · №5

Ну а как же. Пробовал. Говорю не подходит(((

скрытый текст

По ссылкам читаю...
Разбираюсь

Отредактировано doolo (18-05-2016 11:47:24)

turbot · №6

И? не вижу разницы с вашим рисунком, о том что требуется. Либо яснее описывайте, что требуется. Вам нужен попап, как элемент текущей страницы? Фрейм? Без xul'a? Или что?

doolo · №7

как-то так... чтоб не менюшка вылазила, а html страничка

Добавлено 18-05-2016 12:13:53
Сделал. ура!

через xul

Выделить код

Код:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://sample/skin/style.css" type="text/css"?>
<overlay id="sample"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    xmlns:html="http://www.w3.org/1999/xhtml">
  <script src="lib/jquery-1.6.2.min.js"></script>
  <script src="lib/sugar-0.9.2.min.js"></script>
  <script src="mixpanel.js"></script>
  <script src="config.js"></script>
  <script src="background.js"/>
  <script type="application/x-javascript">
    window.addEventListener("load", function() { init(); }, false);
   </script>

    <toolbarpalette id="BrowserToolbarPalette">
        <toolbarbutton id="panelbutton" label="test" popup="testpopup" />
   </toolbarpalette>
    
    <popupset>
        <panel id="testpopup" type="arrow">
           <iframe style="width: 640px; height: 480px" src="chrome://sample/content/popup.html" flex="100%" />
       </panel>
   </popupset>
</overlay>

Отредактировано doolo (18-05-2016 12:13:53)

Полезная информация

№118-05-2016 08:47:25