document.readyのときにモーダルダイアログを表示する

アルフォンソ

カスタムボックスjQueryプラグインを使用していますが、ページの準備ができたときにモーダルダイアログを表示させたいと思います。

これは私の現在のコード(JS部分)です:

<script>
    $( document ).ready(function() {
        $.fn.custombox( this, {
            overlay: true,
            effect: 'blur',
            url:  '#modal'
        });
        e.preventDefault();
    });
</script>

そしてこのコード(HTML部分):

<div id="modal" style="display: none;" class="modal-example-content">
    <div class="modal-example-header">
        <button type="button" class="close" onclick="$.fn.custombox('close');">&times;</button>
        <h4>jQuery Custombox</h4>
    </div>
    <div class="modal-example-body">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>

何が間違っているのかわかりません。誰かがそれを機能させる方法を教えてくれることを願っています。

アンドレ・ムニス

'this'を関数に渡す代わりに、正しい要素を渡す必要があります。したがって、最初にモーダルdivを選択します。このコードを試してください:

<script>
$( document ).ready(function() {

    var modal = document.getElementById('modal');

        $.fn.custombox( modal, {
            overlay: true,
            effect: 'blur',
            url:'#modal'
        });
    });
</script>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

一度発生するグローバルイベントとして機能するpromiseにコールバックをアタッチするという概念の名前はありますか?($(document).ready()のように)

分類Dev

TabStrip のタブから移動するときにモーダル ダイアログを表示する

分類Dev

document.readyの後にロードするWordPressプラグインを作成します

分類Dev

document.addEventListenerと$(document).on

分類Dev

Jqueryにより、document.ready関数の前にカーソルを進めることができます

分類Dev

jqueryのdocument.readyの後にロードされているdivにスタイルを追加します

分類Dev

document.readyからwindow.loadの間に、特定のdivにローダーを設定します

分類Dev

ダイアログの回答を使用したdocument.getElementById()。value

分類Dev

モーダルダイアログがExcelで開いているときにコードを表示する

分類Dev

Symfony:アクセスが拒否されたときにjQueryモーダルダイアログを表示する

分類Dev

インテントACTION_OPEN_DOCUMENT_TREEを開始すると、空の最近のフォルダーが自動的に開きますか?

分類Dev

デュランダルの多言語アプリ、観察可能なページ/モジュールのタイトル、動的に変化するdocument.title

分類Dev

$(document).ready(function()JavaScriptをできるだけ早くレンダリングする方法は?

分類Dev

$(document).ready()にスクリプトをロードする方法

分類Dev

document.ready()内で定義された関数をグローバルに変換する方法

分類Dev

document.ready関数の非表示フィールドに動的な値を設定する方法

分類Dev

document.ready関数の外部でjQueryにグローバル変数を作成します

分類Dev

$(document).ready shorthand

分類Dev

Typescript 3.0 with $(document).ready

分類Dev

Typescript 3.0 with $(document).ready

分類Dev

Jquery Mobile $(document).ready();

分類Dev

document.createElement( "p")を使用するときに、<p>要素の途中にアンカータグを追加する方法

分類Dev

jquery $ document.readyはjsonファイルがロードされるのを待ちますか?

分類Dev

$(document).bind( 'ready'、function)と$(document).ready(function(){})の違いは何ですか

分類Dev

AngularJSのモーダルダイアログにプロフィール写真を表示する

分類Dev

モーダルダイアログ内にマット選択を表示する

分類Dev

Bootstrapモーダルダイアログを順番に表示する

分類Dev

PHPと$(document).ready()の競合

分類Dev

HttpInterceptorからのモーダルダイアログを表示する

Related 関連記事

  1. 1

    一度発生するグローバルイベントとして機能するpromiseにコールバックをアタッチするという概念の名前はありますか?($(document).ready()のように)

  2. 2

    TabStrip のタブから移動するときにモーダル ダイアログを表示する

  3. 3

    document.readyの後にロードするWordPressプラグインを作成します

  4. 4

    document.addEventListenerと$(document).on

  5. 5

    Jqueryにより、document.ready関数の前にカーソルを進めることができます

  6. 6

    jqueryのdocument.readyの後にロードされているdivにスタイルを追加します

  7. 7

    document.readyからwindow.loadの間に、特定のdivにローダーを設定します

  8. 8

    ダイアログの回答を使用したdocument.getElementById()。value

  9. 9

    モーダルダイアログがExcelで開いているときにコードを表示する

  10. 10

    Symfony:アクセスが拒否されたときにjQueryモーダルダイアログを表示する

  11. 11

    インテントACTION_OPEN_DOCUMENT_TREEを開始すると、空の最近のフォルダーが自動的に開きますか?

  12. 12

    デュランダルの多言語アプリ、観察可能なページ/モジュールのタイトル、動的に変化するdocument.title

  13. 13

    $(document).ready(function()JavaScriptをできるだけ早くレンダリングする方法は?

  14. 14

    $(document).ready()にスクリプトをロードする方法

  15. 15

    document.ready()内で定義された関数をグローバルに変換する方法

  16. 16

    document.ready関数の非表示フィールドに動的な値を設定する方法

  17. 17

    document.ready関数の外部でjQueryにグローバル変数を作成します

  18. 18

    $(document).ready shorthand

  19. 19

    Typescript 3.0 with $(document).ready

  20. 20

    Typescript 3.0 with $(document).ready

  21. 21

    Jquery Mobile $(document).ready();

  22. 22

    document.createElement( "p")を使用するときに、<p>要素の途中にアンカータグを追加する方法

  23. 23

    jquery $ document.readyはjsonファイルがロードされるのを待ちますか?

  24. 24

    $(document).bind( 'ready'、function)と$(document).ready(function(){})の違いは何ですか

  25. 25

    AngularJSのモーダルダイアログにプロフィール写真を表示する

  26. 26

    モーダルダイアログ内にマット選択を表示する

  27. 27

    Bootstrapモーダルダイアログを順番に表示する

  28. 28

    PHPと$(document).ready()の競合

  29. 29

    HttpInterceptorからのモーダルダイアログを表示する

ホットタグ

アーカイブ