[CSS]テキストをクリックすると、divがポップアップで表示されるようにする方法

  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

CSSを使用して、テキストをクリック時にdivをポップアップで浮かせる方法

たとえば、「Contact Us」をクリックすると、お問い合わせフォームがポップアップで表示されるなど、テキストリンクをクリックしたときに、特定のdiv領域がポップアップで表示される効果を希望する場合があります。 この場合に使用可能なスクリプトに次のstackoverflowに記載されているソースを紹介しました。

しかし、上記の方法は、全く良い方法ではないMatthew様が教えてきました。 代わりにMatthew様が提案された次のCSSモーダル(Modal)のコードを応用してください。

常に良いアドバイスをしていただくMatthew様に感謝いたします。 結果は、この文を変更する前に紹介したもの(参考)と同じです。

テキストリンクをクリックすると、指定されたdiv領域がLightboxポップアップ形式で表示されます。

テキストリンクをクリックすると、指定されたdiv領域がモーダル(Modal)ポップアップ形式で表示されます。

参考までに、ワードプレスプラグインは、javascript / jQueryテンプレートは、PHPコードなど各種コードを販売する CodecanyonでメニュースタイルなどのCSSコードやJavaScriptの/ jQueryテンプレートを購入することができます。

Codecanyonで販売されているCSSコード
Codecanyonで販売されているベストセラーCSSコード

ワードプレスのポップアッププラグイン

そして、ワードプレスのプラグインを使用してコンタクトフォーム、サブスクリプションのフォームなどを浮かべる機能を実装することができます。 無料のプラグインの場合、ほとんどの画面であるロードされ、ポップアップを浮かべる機能をすることがあります。 有料のプラグインの中で、テキストリンクや画像リンクをクリックしたときにポップアップを浮かべる機能を提供するプラグインがあるようです。

ちょっと検索してみるとConvertPlug、Layered Popups for WordPress などのプラグインが、このような機能を提供していますね。

そして Ninja Popups for WordPressというプラグインも同様の効果を提供していますね。 プラグインを使用すると、比較的満足のいく効果を得ることができるようになります。

参考

カテゴリー jQueryの例


3のコメント

  1. 少し懸念される部分があり、コメントをスリョダがコメントで説明するのが大変文を一つ作成しました。

    http://hackya.com/kr/css-만으로-모달창-띄우기/

    応答
    • ありがとうございます。

      stackoverflowでユーザーから良い(?)評価を受けたすべての良いコードのみのではないよね。 文を修正するようにします。

      応答
    • おかげで今CSSで簡単にモーダルウィンドウを浮かせことができるでしょね。
      https://jsfiddle.net/mspsys/L5fLrwnh/

      このような部分についての合間検索見てもしっかりと説明された文を見つけるのは容易ではなかったが(おそらく検索方向が間違っていたようですね。CSS Modalにして検索すべきのに...)良いコードを教えてくれてとても感謝しています。 (お知らせいただいたコードを別のファイルに保存しました。これから便利に利用することができるようです。笑)

      応答