Link to home
Start Free TrialLog in
Avatar of Whing Dela Cruz
Whing Dela CruzFlag for Anguilla

asked on

Popup write two lines

Hi experts, I wish to write two lines on my popup div. Codes below won't allow write two lines. Help please!

<div class="popup">
   <span class="popuptext" id="myPop75"></span>
</div>

<script>
function showPopUpReminders() 
{
   document.getElementById("myPop75").innerHTML = "Hello! \n okey";
   var popup = document.getElementById("myPop75");
   popup.classList.toggle("show");
   setTimeout(function() 
   {
   popup.classList.toggle("show");
   }, 6000);
}
</script>

Open in new window


CSS:

/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

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

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

/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Whing Dela Cruz

ASKER

It's working sir, Thank you so much!
You are welcome.