Turn iframe into a popup or maybe a button via text box

[Ed_]

As a follow up to this question:

Make iframe talk to a text card to have a custom layout for a iframe

Is it possible to add some additional CSS code into the text box HTML editor to convert the iframe into a popup?

The purpose is to have the ability to minimize and maximize the iframe window. If it's possible to do this without having to use `.popup` then I am open to that method as well 🙂

PS CSS is not in my domain of daily use so I don't really know how to do this correctly.

Sample code 1:

<style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

 

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

 

        .popup {
            position: relative;
            display: inline-block;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

 

            .popup .popuptext {
                visibility: hidden;
                width: 500px;
                background-color: #fff;
                color: #fff;
                text-align: center;
                border-radius: 6px;
                padding: 8px 0;
                position: absolute;
                z-index: 1;
                bottom: 125%;
                left: 50%;
                margin-left: -80px;
            }

 

                .popup .popuptext::after {
                    content: "";
                    position: absolute;
                    top: 100%;
                    left: 50%;
                    margin-left: -5px;
                    border-width: 5px;
                    border-style: solid;
                    border-color: #fff transparent transparent transparent;
                }

 

 

            .popup .show {
                visibility: visible;
                -webkit-animation: fadeIn 1s;
                animation: fadeIn 1s;
            }

 

 

        @-webkit-keyframes fadeIn {
            from {
                opacity: 0;
            }

 

            to {
                opacity: 1;
            }
        }

 

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

 

            to {
                opacity: 1;
            }
        }
</style>

Sample code 2:

<span class="popuptext" id="myPopup"><iframe src='https://URL/chatot'  style='min-width: 400px; width: 100%; min-height: 500px;'></iframe></span>

Option 2:

As an alternate solution, I was also thinking of maybe converting the iframe into a button, somewhat similar to what is shown in the link below under section `4 flavors of button`. 

ArcGIS Hub Site and Page Customization: Tips, Tricks, and Samples!

But then again I don't know how to work this code or the above popup code with my current working code.

Also I don't know if the row card supports more than one `CSS class`, because I think we will need more than one CSS class to use both `chatframe` and `popup` classes.

Current Code:

<style>
.chatframe iframe { 
   width: 500px; 
   height: 100%; 
   background: none; 
   border: 0px; 
   bottom: 0px; 
   float: none; 
   margin: 0px; 
   padding: 0px; 
   position: fixed; 
   right: 0px; 
   z-index: 999; 
}​
</style>