Skip to main content

How to make pop up with reactjs

How to make a pop-up information box when you click an element. Example like this image : Before Click

After Click

Like this image, you click "View all study equipment" an element and then get that pop-up for more information.

This is my code :

<>
  <div className="description-container">
    <div className="nav-tab">
      <ul className="description-tab">
        <li>
          <a href="/" className="active">
            Class Description
          </a>
        </li>
        <li>
          <a href="/">Testimony</a>
        </li>
        <li>
          <a href="/">FAQ</a>
        </li>
      </ul>
    </div>
  </div>

  <div className="description-info">
    <div className="desc-list">
    <h2>Description</h2>
    <p>
      Websites in today's era have become a major need that cannot be
      ignored. All business or education sectors can use the website as a
      tool for promotion, exchange of information, and others. Based on data
      from the World Wide Web Technology Surveys, of all active websites,
      88.2% use HTML, 95.6% use CSS and 95% use JavaScript. This class
      thoroughly discusses the basics of HTML, CSS and JavaScript as the
      three foundations of website creation.
    </p>
    <ul>
      <li>
        <p>The web is a platform that can be accessed through many kinds of devices. This is an advantage if you develop Web-based applications.</p>
      </li>
      <li>
        <p>Web development does not require a computer/laptop that has high specifications, so it is not an obstacle for those of you who do not have a capable device.</p>
      </li>
      <li>
        <p>The website is a platform that is reached by search engines such as Google Search, so the website is suitable as a medium for promoting business or content.</p>
      </li>
      <li>
        <p>Developing a website includes development that is easy to maintain and easy to publish.</p>
      </li>
    </ul>
    </div>
    <div className="specs-description-info">
        <h4>Learning Equipment</h4>
        <h5><i class="fas fa-microchip"></i>Processor</h5>
        <span>Intel Celeron (Core i3 and above Recommended)</span>
        <h4>Tools yang dibutuhkan untuk belajar:</h4>
        <span><i class="fad fa-window"></i>Web Browser (Google Chrome atau Mozilla Firefox)</span>
        <br />
        <br />
        <a className="equip_info" href="/">View all study equipment</a>
    </div>
  </div>

  <div className="sub-border-description-info">
        <h3>Student Targets and Goals :</h3>
        <ul>
            <li>
                <p>This class is intended for beginners who want to start their career in the field of web development (web creation) and need a strong foundation or foundation before studying deeper in the web field, with reference to international standards owned by Google Developers.</p>
            </li>
            <li>
                <p>Classes can be attended by students who are IT literate so it is mandatory to have and be able to operate a computer well.</p>
            </li>
            <li>
                <p>This class is designed for beginners so there are no prerequisites in prior understanding of programming.</p>
            </li>
            <li>
                <p>Students must be able to learn independently, be committed, really have curiosity, and be interested in the subject matter, because no matter how good this class material is, it will not be useful without students' seriousness to learn, practice, and try.</p>
            </li>
        </ul>
    </div>
    <div className="subdescription-info">
        <h3>General and Specific Objectives of the Training :</h3>
        <ul>
            <li>
                <p>At the end of the training, participants can create a simple website using programming code that complies with global standards.</p>
            </li>
            <li>
                <p>Build a website using simple HTML, CSS, and JavaScript code.</p>
            </li>
            <li>
                <p>Implement a good website structure using standard semantic HTML.</p>
            </li>
            <li>
                <p>Demonstrating the preparation of website layouts using float or flexbox techniques.</p>
            </li>
        </ul>
    </div>
</>

Maybe you can share how to make it with React Javascript and CSS too. This is using newest react. Thank You

Via Active questions tagged javascript - Stack Overflow https://ift.tt/Tgl9aEZ

Comments

Popular posts from this blog

ValueError: X has 10 features, but LinearRegression is expecting 1 features as input

So, I am trying to predict the model but its throwing error like it has 10 features but it expacts only 1. So I am confused can anyone help me with it? more importantly its not working for me when my friend runs it. It works perfectly fine dose anyone know the reason about it? cv = KFold(n_splits = 10) all_loss = [] for i in range(9): # 1st for loop over polynomial orders poly_order = i X_train = make_polynomial(x, poly_order) loss_at_order = [] # initiate a set to collect loss for CV for train_index, test_index in cv.split(X_train): print('TRAIN:', train_index, 'TEST:', test_index) X_train_cv, X_test_cv = X_train[train_index], X_test[test_index] t_train_cv, t_test_cv = t[train_index], t[test_index] reg.fit(X_train_cv, t_train_cv) loss_at_order.append(np.mean((t_test_cv - reg.predict(X_test_cv))**2)) # collect loss at fold all_loss.append(np.mean(loss_at_order)) # collect loss at order plt.plot(np.log(al...

Sorting large arrays of big numeric stings

I was solving bigSorting() problem from hackerrank: Consider an array of numeric strings where each string is a positive number with anywhere from to digits. Sort the array's elements in non-decreasing, or ascending order of their integer values and return the sorted array. I know it works as follows: def bigSorting(unsorted): return sorted(unsorted, key=int) But I didnt guess this approach earlier. Initially I tried below: def bigSorting(unsorted): int_unsorted = [int(i) for i in unsorted] int_sorted = sorted(int_unsorted) return [str(i) for i in int_sorted] However, for some of the test cases, it was showing time limit exceeded. Why is it so? PS: I dont know exactly what those test cases were as hacker rank does not reveal all test cases. source https://stackoverflow.com/questions/73007397/sorting-large-arrays-of-big-numeric-stings

How to load Javascript with imported modules?

I am trying to import modules from tensorflowjs, and below is my code. test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title </head> <body> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script> <script type="module" src="./test.js"></script> </body> </html> test.js import * as tf from "./node_modules/@tensorflow/tfjs"; import {loadGraphModel} from "./node_modules/@tensorflow/tfjs-converter"; const MODEL_URL = './model.json'; const model = await loadGraphModel(MODEL_URL); const cat = document.getElementById('cat'); model.execute(tf.browser.fromPixels(cat)); Besides, I run the server using python -m http.server in my command prompt(Windows 10), and this is the error prompt in the console log of my browser: Failed to loa...