-1

HTML5、JavaScriptでフレームレスウィンドウを作成する方法を教えてください。

Webを検索したところ、ほとんどの場合、ライブラリを使用するためのリンクが見つかりました。サードパーティのライブラリを使用せずに、独自のフレームレスウィンドウを最初から開発したいと考えています。

フレームレスウィンドウとは、フレーム、ステータスバー、デフォルトの最小化ボタン、デフォルトの閉じるボタン、ロールバーがないウィンドウを意味します。これは、閉じるボタンがペイントされたスタンドアロンの画像のように見えます。

誰かがとても親切で、ほとんどのブラウザで受け入れられるアイデアやコードを私に提供してくれるでしょうか？

例：

何人かが尋ねたように、正確には、Rapidshareで非常に良い例を見つけました。画面の中央に「アップロード」という大きな青/オレンジのボタンがあります。押すだけでフレームレスウィンドウが表示されます。

ウィンドウは、私が達成しようとしていることを正確に表しています。拡大画像を表示したり、ログイン情報の入力を求めたりするときに、何度も見たことがあります。そのウィンドウの表示に関連するアニメーションも気に入っています。

4

3 に答える 3

1

フレームなし

これは、ドキュメントで（i）フレームを使用するかどうかの決定です。

スクロールバーなし

CSSを使用すると、スクロールバーを抑制したり、ウィンドウサイズに正確にサイズ変更するレイアウトを作成したりできます。

ステータスバー、最小化、クローズ、ロールバーはありません。

これは、 window.openでポップアップを作成するときにchrome-feature記述子で可能です。ただし、閉じられないウィンドウを作成することはできません。閉じるボタンを非表示にするには、いくつかの権限も必要です。

フルスクリーンアプリケーションが必要なようです。新しいフルスクリーンAPIの使用を検討しましたか？

于 2012-05-16T21:20:19.120 に答える
1

コンセプトを簡単に説明するためだけに..

body の直下に 2 つの div を作成する

  <div id="backmask"></div>
  <div id="contentwindow"></div>

  <!-- somewhere else in your page -->
  <a href="somepage.html" class="showinwindow">click me</a>

これらのcss（大まかに）

  <style type="text/css">

    #backmask { 
      display:block; 
      width:100%;
      height:100%;  
      background-color:black;
      position:absolute; top:0; left:0;
      z-index:1000;
      display:none;

      opacity:0.7;
      filter:alpha(opacity=70);
     }

    #contentwindow { 
      display:block; 
      width:800px;
      height:600px;  
      background-color:white;
      position:absolute; top:50px; left:50px;
      z-index:1001;
      display:none;
     }

    .bodywithwinOpenClass { overflow:hidden; width:100%; height:100%; }
  </style>

そして（クイックにjqueryを使用しています）

   <script type="text/javascript">

   $(".showinwindow").click( function(e) {

   /* we don't want the visitor to leave, stop the normal action */
   e.preventDefault();

   /* get what to show */
    var contenttoload = $(this).attr.("href");

  /* set the body up */
  $("body").addClass("bodywithwinOpenClass");

   /* show wins and masker */
   $("#backmask").css("display","block");
   $("#contentwindow").css("display","block");

  /* load the content  */
  $("#contentwindow").load(contenttoload);

   });
   </script>

これは直接入力されたもので、実行されたものではありません。キャンディーは含まれていません (ポジショニングなどのため)。

  • それを「閉じる」には逆が必要です
于 2012-05-16T21:25:37.937 に答える
0

http://www.codelifter.com/main/javascript/amazingframelesspopup1.html <-- できることはほとんどカバーしています - Web ページからクロムレス ブラウザ ウィンドウを起動することはできません。

何を達成しようとしていますか？

それはとても簡単です。これはウィンドウではありません。実際には、ページ コンテンツの残りの上に浮かぶページ上の div です。jQuery のようなフレームワークを使用してそれを行う方法はたくさんあります。

チュートリアル

基本的に必要なのは、高いz-indexを持つ隠し位置の div と、それを表示/非表示にするための少しのスクリプトだけです。

<div id="popup" style="z-index:1000;display:none;position:absolute;top:100px;left:100px;">Some content</div>

<button onclick="document.getElementById('popup').style.display='block';">Open</button>
<button onclick="document.getElementById('popup').style.display='none';">Close</button>
于 2012-05-16T21:12:30.727 に答える