私はここにあるjQueryimgareaselectプラグインで遊んでいます:https://plugins.jquery.com/imgareaselect/
そしてそのように動作します:
$('#img_for_select').imgAreaSelect({
x1: 10,
y1: 10,
x2: 100,
y2: 100,
handles: true,
parent: '#modal_content'
});
これは、純粋なimgAreaSelectが機能することを示すためのフィドルですhttp://jsfiddle.net/kurtgn/vaf5f9mf/
これは、モーダルウィンドウをトリガーし、同じimgAreaSelectを同じ画像(モーダル内)に適用しようとするものです。http://jsfiddle.net/kurtgn/f0x8o2L7/
なぜ後者が機能しないのですか?
shown.bs.modal
イベントを使用してモーダルを開いた直後に、imgAreaSelectを使用できます。このような
var myModal = $('#myModal').modal({
show: false
});
myModal.on('shown.bs.modal', function () {
$('#img_for_select').imgAreaSelect({
x1: 10,
y1: 10,
x2: 100,
y2: 100,
handles: true,
parent: '.modal-content'
});
});
また、親はである必要が.modal-content
あり、ではありません#modal-content
。(それは問題ではありませんが)
これがデモですhttp://jsfiddle.net/dhirajbodicherla/f0x8o2L7/7/
PS:
クリックするとモーダルウィンドウが開くように、ボタンに以下の変更を加えました
<button type="button" data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg" id="modalWindow">Launch demo modal</button>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加