Question

所以我正在尝试为我的教堂搭建平台。本质上，当青年进入我们的新媒体中心时，我们希望：

您可以根据自己的感受，点击其中一种情感
弹出与他们选择的情感有关的经文

我是编码的新手（仅在工作时间以外进行了几周的工作），而我对哪里出错了感到很困惑。

最初我使用的是悬停功能，但现在我想按照项目符号2所述升级到弹出窗口。

这是我的代码笔：https://codepen.io/mj2913/pen/pXgxOz

    <div class="happy-thumb popup" onclick="myFunction()">
        <p>happy
          <span class="popup-thumb-span" id="happyPopup">I praise you, for I am fearfully and wonderfully made. Wonderful are your works; my soul knows it very well. Psalm 139:14</span>
        </p>
      </div>

    <script>
    function myFunction() {
      var popup = document.getElementById("happyPopup");
      popup.classList.toggle("show");
    }
    </script>

Answer 1

尝试一下。我添加了jQuery模式弹出窗口。在下面替换您的HTML页面

  <!DOCTYPE html>
    <html lang="en">
    <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
    <!-- Remember to include jQuery :) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

    <!-- jQuery Modal -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
    <head>
      <h1>Welcome to Friendship Community Church's Youth Media Center</h1>
      <h2>How Are You Feeling Today?</h2>
    </head>

    <div class="col1">
      <button class="happy-thumb popup" onclick="$('#happyPopup').modal();">
        <p>happy
          <span class="popup-thumb-span" id="happyPopup" rel:"modal:open">I praise you, for I am fearfully and wonderfully made. Wonderful are your works; my soul knows it very well. Psalm 139:14</>
        </p>
      </div>
      <div class="sad-thumb popup">
        <p>sad
          <span class="popup-thumb-span" id="sadPopup">Therefore confess your sins to each other and pray for each other so that you may be healed. The prayer of a righteous man is powerful and effective. James 5:16</span>
        </p>
      </div>
      <div class="surprised-thumb popup">
        <p>surprised
          <span class="popup-thumb-span" id="surprisedPopup">Trust in the Lord with all your heart and lean not on your own understanding; in all your ways submit to Him, and He will make your paths straight. Proverbs 3:5-6</span>
        </p>
      </div>
      <div class="anxious-thumb popup">
        <p>anxious
          <span class="popup-thumb-span" id="anxiousPopup">Do not be anxious about anything, but in everything, by prayer and petition, with thanksgiving, present your requests to God. Phillipians 4:6</span>
        </p>
      </div>
    </div>
    <div class="col2">
      <div class="fearful-thumb popup">
        <p>fearful
          <span class="popup-thumb-span" id="fearfulPopup">Surely God is my salvation; I will trust and not be afraid. The LORD himself is my strength and my defense; he has become my salvation. Isaiah 12:2</span>
        </p>
      </div>
      <div class="confident-thumb popup">
        <p>confident
          <span class="popup-thumb-span" id="confidentPopup">I have told you these things, so that in me you may have peace. In this world you will have trouble. But take heart! I have overcome the world. John 16:33</span>
        </p>
      </div>
      <div class="tired-thumb popup">
        <p>tired
          <span class="popup-thumb-span" id="tiredPopup">Come to me, all you who are weary and burdened, and I will give you rest. Matthew 11:28</span>
        </p>
      </div>
      <div class="joyful-thumb popup">
        <p>joyful
          <span class="popup-thumb-span" id="joyfulPopup">Sing for joy, O heavens, and exult, O earth; break forth, O mountains, into singing! For the Lord has comforted his people and will have compassion on his afflicted. Isaiah 49:13</span>
        </p>
      </div>
    </div>
    <div class="col3">
      <div class="discouraged-thumb popup">
        <p>discouraged
          <span class="popup-thumb-span" id="discouragedPopup">Have I not commanded you? Be strong and courageous. Do not be afraid; do not be discouraged, for the Lord your God will be with you wherever you go. Joshua 1:9</span>
        </p>
      </div>
      <div class="pitiful-thumb popup">
        <p>pitiful
          <span class="popup-thumb-span" id="pitifulPopup">Humble yourselves, therefore, under God’s mighty hand, that He may lift you up in due time. Cast all your anxiety on Him because He cares for you. 1 Peter 5:6-7</span>
        </p>
      </div>
      <div class="impatient-thumb popup">
        <p>impatient
          <span class="popup-thumb-span" id="impatientPopup">Jesus said, I am the way, the truth, and the life. No one comes to the Father except through Me. John 14:6</span>
        </p>
      </div>
      <div class="cautious-thumb popup">
        <p>cautious
          <span class="popup-thumb-span" id="cautiousPopup">'For I know the plans I have for you', declares the LORD, 'plans to prosper you and not to harm you, plans to give you hope and a future'. Jeremiah 29:11</span>
        </p>
      </div>
    </div>
    <div class="col4">
      <div class="unloved-thumb popup">
        <p>unloved
          <span class="popup-thumb-span" id="unlovedPopup">Love is patient, love is kind. It does not envy, it does not boast, it is not proud. 1 Corinthians 13:4</span>
        </p>
      </div>
      <div class="hopeless-thumb popup">
        <p>hopeless
          <span class="popup-thumb-span" id="hopelessPopup">Jesus said to him, 'I am the way, and the truth, and the life. No one comes to the Father except through me'. John 14:6</span>
        </p>
      </div>
      <div class="confused-thumb popup">
        <p>confused
          <span class="popup-thumb-span" id="confusedPopup">Be on your guard; stand firm in faith; be courageous; be strong. 1 Corinthians 16:13</span>
        </p>
      </div>
      <div class="stressed-thumb popup">
        <p>stressed
          <span class="popup-thumb-span" id="stressedPopup">So do not fear, for I am with you; do not be dismayed, for I am your God. I will strengthen you and help you; I will uphold you with my righteous right hand. Isaiah 41:10</span>
        </p>
      </div>
    </div>
    </div>
    </div>
    <p>Code inspired by MIT. All rights reserved to them</p>

输出

jQuery库-https://jquerymodal.com/

弹出式互动签到页面

1 个答案: