2016-09-29 6 views
2

が、私は明らかにボタンをクリックしたときに私が何を探しています何それjqueryを使って新しいウィンドウにイメージを表示する方法はありますか?ここで

$(document).ready(function() { 
    $('#happymyleast').css('display', 'none'); 
}); 

$(document).ready(function() { 
    $('#reveal').click(function() { 
    window.open('testpage.html'); 
    $('#happymyleast').show(); 
    }); 
}); 
#happymyleast { 
    position: absolute; 
    top: 119px; 
    left: 71px; 
    height: 20px; 
    width: 20px; 
    background-color: #FFCC00; 
    border-radius: 10px; 
} 
<p id="happymyleast"></p> 
<button id="reveal">Reveal</button> 

ための私のコードである私は、画像や私が構築したCSSの形状をしたいです別のページに表示するjQueryを使用してこれを実現することは可能でしょうか?

+0

画像を開くことは簡単です。単に画像のURLを指定した 'window.open()'だけです。あなたは 'css shape'ってどういう意味ですか? –

+0

window.open()をコードに追加しても問題ありません。私が作成したものを追加すれば、それをより明確にすることができます。 –

+0

私は私の質問を編集し、私が行ったことを見ることができるようにCSSを追加します。 –

答えて

0
$(document).ready(function(){ 
    $('#happymyleast').css('display', 'none'); 
}); 
$(document).ready(function(){ 
    $('#reveal').click(function(){ 
     var sub_window= window.open(); 
     var content=$('#happymyleast').html(); 
     //var styles=$('style').clone(); 
     var styles=$('style').clone().wrap('<div/>').parent().html(); 
     var full_content ='<head>'+styles+'</head>'+'<body>'+content+'</body>'; 
     //console.log(styles); 
     sub_window.document.write(full_content); 

    }); 
}); 

pの中にイメージを置くと、それを見ることができます。または、「Hello Worl」と入力すると、それを見ることができます。

は、私はあなたが私が例を行った。この

ような何かを探していると思うが、jsfiddleは新しいページにイメージを開くdocument.write

+0

自分のコードに自分のコードを追加しました。空白のページが開きます。私は新しいページにCSSを作成するために使用したスタイルシートを追加し、その方法でhappymyleastのシェイプが他のページに表示されます。ご協力いただきありがとうございます。 –

+0

ここには謎があります:https://jsfiddle.net/6Lbv4gnd/1/ –

+0

あなたの助けてくれてありがとう、私はフィドルを見ました。 –

1

をブロックしているので、私は、jsfiddleでそれをホストすることはできませんよCSSの今

window.open($("#your_image").attr("src"), "_blank") 

はこの1つは、動的に生成されている場合、あなたはそれはあなたが動的に外部CSSファイルにあなたの現在のCSSを書くためにAJAXとPHPを使用しなければならない新しいページに表示したいし、次に呼び出し:簡単ですそれは新しいページ !

関連する問題