从书签打开页面，但是，使其像模式窗口一样吗？

Question

我正在使用一个书签，可以（显然）在任何地方被用户调用：

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')})()

如何使它像模式窗口一样，意味着没有难看的浏览器窗口边框-我应该在小书签URL中使用jquery还是类似的东西，如果可以，如何？

Answer 1

您可以使用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更改为所需的值即可。
另外，除非您要使用相对路径，否则请不要忘记BASE_URL中的“ http：//” 。

您的外部JS文件可能包含一个脚本，该脚本将一个元素添加到页面上并悬停在其他元素上。 我建议在Twitter Bootstrap中使用CSS找出如何制作可靠的模态窗口。

编辑-

为了帮助您，我编写了一个小演示 。 它包含2个文件：

• bookmark.html-修改后的Firebug代码以创建书签，该书签会动态添加脚本
• bookmark.js-使用iframe创建模态

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 &times;');
          $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/

Answer 2

我对这个主题了解不多，但是在查看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:部分并格式化了代码以提高可读性。