jqueryimgAreaSelectがブートストラップモーダルウィンドウで機能しない

kurtgn

私はここにある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]

編集
0

コメントを追加

0

関連記事

分類Dev

ブートストラップ付きのモーダルウィンドウが機能しない

分類Dev

ブートストラップドロップダウン-FFでトグルが機能しない

分類Dev

ブートストラップモーダルウィンドウで機能しない月と年を変更する

分類Dev

ドロップダウンメニューでブートストラップモーダルが機能しない

分類Dev

ブートストラップを適用すると、モバイルデバイスで[選択]ドロップダウンが機能しない

分類Dev

ブートストラップの小さなウィンドウのナビゲーションバー ドロップダウンが機能しない

分類Dev

ブートストラップマルチレベルドロップダウンが機能しない

分類Dev

ブートストラップドロップダウンが機能しないのはなぜですか?

分類Dev

Laravelでブートストラップ4ドロップダウンが機能しない-Vueスパ

分類Dev

ドロップダウンボタンがブートストラップ4で機能しない

分類Dev

AngularJsng-クリックがブートストラップドロップダウンで機能しない

分類Dev

流星でブートストラップドロップダウンが機能しない

分類Dev

ui-srefがブートストラップドロップダウンで機能しない

分類Dev

DjangoHeroku-ブートストラップでドロップダウンが機能しない

分類Dev

php codeigniterでブートストラップドロップダウンが機能しない

分類Dev

フラッタードロップダウンメニューの選択がステートフルウィジェットで機能しない

分類Dev

ブートストラップアクションのドロップダウンがテーブルレスポンシブ内で機能しない

分類Dev

navbar のブーストストラップ ドロップダウン リストが機能しない

分類Dev

ブートストラップのドロップダウンサブメニューが機能しない

分類Dev

ブートストラップモーダルウィンドウが閉じない

分類Dev

Django-ブートストラップドロップダウンリストが機能しない

分類Dev

ブートストラップドロップダウンリストが機能しない

分類Dev

ブートストラップドロップダウンリストが機能しない

分類Dev

モーダルウィンドウでボタンのクリックが発火しない(ブートストラップ)

分類Dev

ブートストラップモーダルがカルーセルスライドで機能しない

分類Dev

PHPインクルードがブートストラップドロップダウンで機能しない

分類Dev

Twitterブートストラップ:ボタンスタイルがドロップダウンメニューで機能しない

分類Dev

htmlボタングループのドロップダウンがブートストラップで機能しない

分類Dev

ブートストラップドロップダウンメニューが機能しない

Related 関連記事

  1. 1

    ブートストラップ付きのモーダルウィンドウが機能しない

  2. 2

    ブートストラップドロップダウン-FFでトグルが機能しない

  3. 3

    ブートストラップモーダルウィンドウで機能しない月と年を変更する

  4. 4

    ドロップダウンメニューでブートストラップモーダルが機能しない

  5. 5

    ブートストラップを適用すると、モバイルデバイスで[選択]ドロップダウンが機能しない

  6. 6

    ブートストラップの小さなウィンドウのナビゲーションバー ドロップダウンが機能しない

  7. 7

    ブートストラップマルチレベルドロップダウンが機能しない

  8. 8

    ブートストラップドロップダウンが機能しないのはなぜですか?

  9. 9

    Laravelでブートストラップ4ドロップダウンが機能しない-Vueスパ

  10. 10

    ドロップダウンボタンがブートストラップ4で機能しない

  11. 11

    AngularJsng-クリックがブートストラップドロップダウンで機能しない

  12. 12

    流星でブートストラップドロップダウンが機能しない

  13. 13

    ui-srefがブートストラップドロップダウンで機能しない

  14. 14

    DjangoHeroku-ブートストラップでドロップダウンが機能しない

  15. 15

    php codeigniterでブートストラップドロップダウンが機能しない

  16. 16

    フラッタードロップダウンメニューの選択がステートフルウィジェットで機能しない

  17. 17

    ブートストラップアクションのドロップダウンがテーブルレスポンシブ内で機能しない

  18. 18

    navbar のブーストストラップ ドロップダウン リストが機能しない

  19. 19

    ブートストラップのドロップダウンサブメニューが機能しない

  20. 20

    ブートストラップモーダルウィンドウが閉じない

  21. 21

    Django-ブートストラップドロップダウンリストが機能しない

  22. 22

    ブートストラップドロップダウンリストが機能しない

  23. 23

    ブートストラップドロップダウンリストが機能しない

  24. 24

    モーダルウィンドウでボタンのクリックが発火しない(ブートストラップ)

  25. 25

    ブートストラップモーダルがカルーセルスライドで機能しない

  26. 26

    PHPインクルードがブートストラップドロップダウンで機能しない

  27. 27

    Twitterブートストラップ:ボタンスタイルがドロップダウンメニューで機能しない

  28. 28

    htmlボタングループのドロップダウンがブートストラップで機能しない

  29. 29

    ブートストラップドロップダウンメニューが機能しない

ホットタグ

アーカイブ