Bootstrap3で<object>をクリックしてmodalを起動させたい

Question

Bootstrap3を利用してmodalを組み込みたいのですが、クリックする対象を<object>にするとmodalが起動しない状況です。(<img>や<button>だと普通にmodalは起動します。)
クリック対象にPDF画像を利用したい為、<object>を利用したのですが、何か方法があればご教示下さい。

  <object data="画像のpath/hoge.pdf" data-toggle="modal" data-target="#myModal" type="application/pdf"></object>
  			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">Modal title</h4>
						</div>
						<div class="modal-body">
							…
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
							<button type="button" class="btn btn-primary">Save changes</button>
						</div>
					</div>
				</div>
			</div>

Answer 1

opacityを0にしたbutton要素をかぶせてみるとかどうでしょう。

Comments

[k.t.est]

ご回答ありがとう御座います。<button><object></object></button>にして覆ってみたのですが、残念ながら<object>の範囲内ではクリックが無効でした(<button>の方を少し大きくした場合、<button>の範囲ではmodalが起動しました。)

[kei344]

囲うのではなく、<button></button><object></object>としてCSSでbuttonをobjectの上に持ってくる感じです。

[k.t.est]

確かにそのやり方だと出来ました！ありがとう御座いました！objectタグだと動かない理由がいまいちよくわかってないですが、やはりオプションにdataとかがあるからなんでしょうか・・・・

[kei344]

詳しくは仕様を読む必要がありますが、objectタグは中身にクリックなどのイベントを使用するもの（Flashのようなもの）を入れることがあるのでタグ自体でのクリックに反応が無いのかもしれませんね。