web-dev-qa-db-ja.com

リンクを新しいウィンドウで開くjQuery関数

ボタンをクリックしてポップアップウィンドウでファイルを開くプラグインまたは簡単なスクリプトを見つけようとしています。これは以前は機能していましたが、すべてのjQueryの更新（移行ファイルを含む）でも機能しなくなりました。

私はこれを見つけましたが、これはポップアップを開き、ファイルのURLにもリダイレクトします：

$(document).ready(function() {
$('.popup').click(function(event) {
    window.open($(this).attr("href"), "popupWindow", "width=600,height=600,scrollbars=yes");
 });
});

シンプルなポップアップを表示する方法はありますか？できればサイズ変更可能なスクロールバーが必要です。モーダルボックスに関する多くの投稿を見てきましたが、それでは必要なことを達成できません。ポップアップボックスには独自のデザインがあり、モーダルに適したコンテンツよりも多くのコンテンツがあります。

また、余分なマークアップを追加しないようにします。上記の例のように、クラスを追加するだけで最も意味があります。

javascriptjquerypopupwindow
9
jenhan

これを試して、

$('.popup').click(function(event) {
    event.preventDefault();
    window.open($(this).attr("href"), "popupWindow", "width=600,height=600,scrollbars=yes");
});

これを動作させるにはjQuery参照を含める必要があります。ここに動作サンプルがあります http://jsfiddle.net/a7qJt/

28
Chamika Sandamal

ボタンクリックイベントのみ。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">
            $(document).ready(function () {
                $("#btnext").click(function () {                    
                    window.open("HTMLPage.htm", "PopupWindow", "width=600,height=600,scrollbars=yes,resizable=no");
                });
            });
</script>
2
Murali P
$(document).ready(function() {
$('.popup').click(function(event) {
    window.open($(this).attr("href"), "popupWindow", "width=600,height=600,scrollbars=yes");
 });
});
0
dfsdf

このようにクリックコールバックにreturn false;を追加してみてください-

$(document).ready(function() {
  $('.popup').click(function(event) {
      window.open($(this).attr("href"), "popupWindow", "width=600,height=600,scrollbars=yes");
      return false;
  });
});
0
Mohammad Adil

http://www.jquerybyexample.net/2012/05/open-link-in-new-tab-or-new-popup.html

$(document).ready(function() {
$('A.BLAH').click(function() {
var NWin = window.open($(this).prop('href'), '', 'height=600,width=1000');
if (window.focus)
{
NWin.focus();
}
return false;
});
});
0
computerguy