HTML Modal

Hello again.

I have some HTML here,

                                   <div class="popup" onclick="myFunction2()">Click me!
                                   <span class="popuptext" id="myPopup2"> 
                                    <pre>Credentials....
                                         ......
                                         ......
                                         ......
                                         ......
                                         ......
                                         ......
                                         ......
                                         ......
                                         .......</span></pre>
                                  </div>
                                 <script>
                                 function myFunction2() {
                                  var popup = document.getElementById("myPopup2");
                                   popup.classList.toggle("show");
                                 }
                                 </script>

                               <h5 class="speakers-title mb-0">Joseph</h5>

That needs some adjustment. I'd like for whats between the "pre " and "/pre" tags to be 3 times larger when I click on the "click me" portion of the code. But, I do not know how to accomplish this.

Could someone possibly point me in the right direction?

Thank you.

FWIW: This is not correct, it seems.

Your tags are incorrect, Should be:

<span>
   <pre>
   </pre>
</span>

Not, as in your code:

<span>
   <pre>
   </span>
</pre>

for example something like .... (changed the text color as well as an example)

function myFunction2() {
              var popup = document.getElementById("myPopup2").style ="font-size:20px;color:green;";
              popup.classList.toggle("show");
            }

you'll still need to reset back to the initial state at some point ...
there's plenty of online examples of css/html .

I don't think the above script is normal convention in JS.

Better is (for example)

var popup = document.getElementById("myPopup2");
popup.style = "font-size:20px;color:green;"

In Javascript , we normally do not make double assignments like in the suggested code.

Thank you for that. Now the window that pops up is still too small. Any way I can change the size of it?

Thanks.

what do you mean by 'window' in this example,
can you show a screenshot of the existing screen and a separate screenshot with what you are trying to achieve.

additional html of the existing page would also be of use rather than the snippet provided.

tks

You can see from the HTML and JS code that the "window" is simply an HTML element which is toggled either "hide" or "show". There is no "popup" per se, per the code. It is simply an HTML element which is hidden or shown.

You need to set the width and height CSS parameter.

For example:

<style>
  .popup {
    width: 200px;
    height: 400px;
   }
</style>

Or something similar. You do not need to set the style in the Javascript because the function of the JS code is to only hide or show the HTML element in your code block.

OBTW: You might consider changing your implementation to more closely follow this example:

See also:

This picture will illustrate what i'm trying to achieve. It shows the "popup window" with "Credentials...." in it. I'd like to make that "popup window" bigger, if possible.

BTW, @neo, I tried you snippet, and it didn't work. It did not affect the size of the "popup window." Haha. I quote that a lot. Anyway, any help is always appreciated.

Here's the link

961×797 125 KB

Please stop referring to the basic task of showing and hiding an HTML element in thr DOM as a "popup". It is not.

@Neo did not provide a snippet as a solution. It was an example of how you should approach with a link to a very good tutorial you should follow..

Providing a picture does not help anyone who has knowledge of HTML accomplish this very basic task BTW.

Hiding and showing HTML elements when another element is clicked is very basic.

Sizing an HTML element takes trial-and-error based on your complete HTML code and layout of parent and child element relationships.

What you are trying to do @ignatius is called a "modal". Here is a tutorial which includes sizing elements.

Note:

When working on CSS and JS issues in web development, the dev tools console is your best friend.

This console / tool is available on all main stream browsers and it easier to use than asking questions in a forum.

For example, if you want to change the size of an HTML element, you can test your ideas in the console without writing and reloading code.

You can also right click on any element like so:

... and then choose "Inspect".

This will bring up the console at the exact element you wish to fiddle around with:

You can then edit any element, adding any CSS you wish, including width and height.

You can click on the Javascript console and add JS code, test code, inspect variables, and a whole lot more. You can test adding code and CSS to any element, including parent and child HTML elements. It's very simple to use with a little effort.

This is perhaps the most basic skill and habit anyone who is working on a web page should learn.

There is no need to argue about things, be frustrated, or call people names as @ignatius did (that post was deleted) just because you do not take the time to open the console, described here:

Basic webdev is easy if you follow the myriad tutorials on the net and use this critical webdev tool.

When you are frustrated, you need to listen to people with much more experience who is trying to help you. This is not the first post where @ignatius refuses to use basic webdev tools and becomes aggressive when people who actually know how to develop a production web application try to guide him (second warning given).

The webdev console, like Google, is your best friend.

Finally, everyone must follow the rules here and insulting people who are sincerely guiding you, who actually knows what they are doing, is not tolerated and will result in admin / mod actions.

There is no reason to get frustrated. It's not quantum mechanics or multidimensional slip space jumping, its low level tech and the technology is very mature as are the tools to debug any issue.

Furthermore, calling an HTML modal a popup shows a lack of research on the topic, because showing and hiding HTML elements is very low tech as far as webdev goes and is simple and fun to do!

Instead of getting angry or frustrated, listen to a great military sci-fi series while working, like this top notch Omega Force series by Joshua Dalzelle. Joshua "self publishes" so he does not benefit from all the marketing by the big publishing houses, but he is really, really good:

Omega Rising (Book 1 in the Omega Force series)

Jason Burke was a man hiding from himself in a small cabin high in the American Rocky Mountains when his simple, quiet life was shattered one night by what he first assumed was an aviation mishap. But when he investigates the crash, what he finds will yank him out of his self-imposed exile and thrust him into a world he could have never imagined. He suddenly finds himself trapped on a damaged alien spacecraft and plunged into a universe of interstellar crime lords and government conspiracies, along the way meeting strange new friends… and enemies. As he struggles to find his way back home he is inexorably drawn deeper into a world where one misstep could mean his death. Or worse. He desperately wants to get back to Earth, but it may be the end for him...or is it just the beginning?

This is great fun military sci-fi! I have read (listened) to all 13 books (as of today) almost twice (will finish the second time soon). Omega Force is a better version (in my view) of "Guardians of the Galaxy", with really great characters, action, humor, space battles and more.

Never get frustrated over day-to-day tech coding and sys admin challenges. Enjoy! Life is too short! Coding day-to-day tasks is not "interglactic space travel" or "multi-dimensional quantum physics". It's just a few lines of code Keep things real and develop the habit of reading the docs and tutorials and do the hands of trial-and-error learning process every day