Webデザインにおいてポップアップウィンドウ機能は広く使われており、ユーザーへの即時情報の表示、情報操作の確認、画像効果の表示などに役立ちます。 jqueryではポップアップウィンドウを実装する方法が多数ありますが、ここでは一般的な実装方法をいくつか紹介します。
1. jQuery UI のダイアログ コンポーネントを使用する
dialog は jQuery UI ライブラリのコンポーネントであり、ポップアップ ウィンドウの作成に特に使用されます。ダイアログ コンポーネントを使用するには、まず jQuery UI ライブラリの CSS ファイルと JS ファイルを導入する必要があります。その後、次のコードを通じて基本的なポップアップ ウィンドウを作成できます:
<!-- 引入CSS文件 --> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <!-- 引入JS文件 --> <script src="http://code.jquery.com/jquery-1.12.4.js"></script> <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- 创建弹窗 --> <div id="dialog" title="提示信息"> <p>这里是提示内容</p> </div> <script> $(function() { $("#dialog").dialog(); }); </script>
その中で、div 要素IDが「dialog」のものがポップアップウィンドウであり、外枠のtitle属性がポップアップウィンドウのタイトル、pタグ内の内容がポップアップウィンドウの本体情報となります。最後に、dialog() メソッドを呼び出すことで、デフォルトのスタイルでポップアップ ウィンドウを作成できます。
さらに、dialog() メソッドの構成パラメータを使用して、ポップアップ ウィンドウの表示スタイルと機能をカスタマイズできます。たとえば、次のコードは、ポップアップ ウィンドウに確認ボタンとキャンセル ボタンを表示し、確認ボタンをクリックした後にコールバック関数をトリガーする機能を実装しています:
<div id="dialog-confirm" title="确认操作"> <p>确认要执行操作吗?</p> </div> <script> $(function() { $("#dialog-confirm").dialog({ resizable: false, height: "auto", width: 400, modal: true, buttons: { "确认": function() { // 这里是确认按钮的回调函数 $( this ).dialog( "close" ); }, "取消": function() { $( this ).dialog( "close" ); } } }); }); </script>
2. jQuery プラグイン Fancybox# を使用します。
##FancyBox は、軽量で依存性が低く、高度にカスタマイズ可能な jQuery ポップアップ プラグインです。 Fancybox を使用すると、単一画像ポップアップ ウィンドウ、複数画像ポップアップ ウィンドウ、メディア ポップアップ ウィンドウ、Ajax 読み込みなど、さまざまなポップアップ ウィンドウ機能を実装できます。 まず、Fancybox プラグインの CSS ファイルと JS ファイルを導入する必要があります。次に、次のコードで Fancybox() メソッドを呼び出して、ポップアップ ウィンドウを作成できます:<!-- 引入CSS文件 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" /> <!-- 引入JS文件 --> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script> <!-- 创建图片弹窗 --> <a data-fancybox="gallery" href="image.jpg"> <img src="image.jpg" alt="图片说明"> </a> <!-- 创建ajax加载弹窗 --> <button data-fancybox data-type="ajax" data-src="ajax.html">点击加载弹窗</button> <script> $(function() { $("[data-fancybox]").fancybox({ //这里是配置参数 }); }); </script>
<button class="modal-toggle">点击弹出弹窗</button> <div class="modal"> <div class="modal-content"> <h3>弹窗标题</h3> <p>这里是弹窗内容</p> <button class="modal-close">关闭窗口</button> </div> </div> <style> .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; } .modal-content { max-width: 80%; background-color: white; padding: 20px; border-radius: 5px; text-align: center; } .modal-toggle { display: block; margin: 50px auto; width: 200px; height: 50px; color: white; font-size: 20px; background-color: #1ABC9C; border: none; border-radius: 5px; outline: none; cursor: pointer; } </style> <script> $(function() { $(".modal-toggle").click(function() { $(".modal").fadeIn(); }); $(".modal-close").click(function() { $(".modal").fadeOut(); }); }); </script>
以上がjqueryでポップアップウィンドウを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。