从书签中打开页面，但是，让它像一个模态窗口？

本文介绍了从书签中打开页面，但是，让它像一个模态窗口？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I am using a bookmarklet which can (obviously) be called by the user anywhere:

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或类似于bookmarklet URL的内容，如果怎么样？

How can I make this like a modal window, meaning no ugly browser window borders - should I use jquery or something like in the bookmarklet URL and if so, how?

推荐答案

您可以使用使用。

基本上，当您单击书签时，您会在页面中插入一个外部JS文件。

You could use the approach Firebug Lite uses.
Basically you insert an external JS file into your page when you click on the bookmark.

<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：//，除非你想要使用相对路径。

Just change BASE_URL, PATH_TO_JS and PATH_TO_ICON to what you need it to be.
Also, don't forget the "http://" in the BASE_URL, unless you want to use a relative path.

您的外部JS文件可能包含一个脚本，该脚本会向页面添加一个悬停在其他页面上的元素。我建议在中使用CSS来弄清楚如何制作一个可靠的模态窗口。

Your external JS file could contain a script which adds an element to the page which hovers over others. I recommend using the CSS in Twitter Bootstrap to figure out how to make a reliable modal window.

编辑 -

为了帮助你，我写了。它由2个文件组成：

To help you out I wrote a small demo. It consists of 2 files:

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

    }

  }());

}());

演示时间：

这篇关于从书签中打开页面，但是，让它像一个模态窗口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！