modal pop up window not working

Go to solution
DoDo labs___
Mega Sage

‎01-20-2025 11:38 AM

Hi, 

 

I call the ui page with this client script:

 

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
   if (isLoading || newValue === '') {
      return;
   }
 
var gdw = new GlideModal('TESZT');
gdw.setTitle('Change checklist');
gdw.setSize(400);
gdw.render();
}

 

 

Both the background and the popup window become dark, and the button in popup doesn't work.

What could be the problem?

 

UI Page HTML code:

 

<html>
<head>
  <style>
    .modal {
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.4);
    }

    .modal-content {
      background-color: #fefefe;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
      border-radius: 15px;
    }

  </style>
</head>
<body>

<button onclick="myFunction2()">Add Item</button>

  <h2>Test</h2>

</body>
</html>
 
DoDolabs____0-1737401849861.png

 

0 Helpfuls
  • 843 Views
1 ACCEPTED SOLUTION

Go to solution
Ankur Bawiskar
Tera Patron
Tera Patron

‎01-20-2025 07:09 PM

@DoDo labs___ 

The CSS for the modal might be conflicting with the default styles of the GlideModal. The background-color: rgba(0, 0, 0, 0.4); in your .modal class is making the entire background dark.

use this in html for the css

<head>
  <style>
    .modal-content {
      background-color: #fefefe;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
      border-radius: 15px;
    }
  </style>
</head>

If my response helped please mark it correct and close the thread so that it benefits future readers.

Regards,
Ankur
✨ Certified Technical Architect  ||  ✨ 9x ServiceNow MVP  ||  ✨ ServiceNow Community Leader

View solution in original post

0 Helpfuls
3 REPLIES 3

Go to solution
Ankur Bawiskar
Tera Patron
Tera Patron

‎01-20-2025 07:09 PM

@DoDo labs___ 

The CSS for the modal might be conflicting with the default styles of the GlideModal. The background-color: rgba(0, 0, 0, 0.4); in your .modal class is making the entire background dark.

use this in html for the css

<head>
  <style>
    .modal-content {
      background-color: #fefefe;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
      border-radius: 15px;
    }
  </style>
</head>

If my response helped please mark it correct and close the thread so that it benefits future readers.

Regards,
Ankur
✨ Certified Technical Architect  ||  ✨ 9x ServiceNow MVP  ||  ✨ ServiceNow Community Leader
0 Helpfuls

Go to solution
Ravi Gaurav
Giga Sage
Giga Sage

‎01-20-2025 09:34 PM

Hi @DoDo labs___ 
You can modify the below code :-
function onChange(control, oldValue, newValue, isLoading, isTemplate) {
if (isLoading || newValue === '') {
return;
}
var gdw = new GlideModal('TESZT');
gdw.setTitle('Change Checklist');
gdw.setSize(400);
gdw.render(); // Load the modal
}

UI Page :-
<html>
<head>
<style>
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
border-radius: 15px;
}
</style>
</head>
<body>
<div class="modal-content">
<h2>Test</h2>
<button onclick="myFunction2()">Add Item</button>
</div>
<script>
function myFunction2() {
alert('Add Item button clicked!');
}
</script>
</body>
</html>


--------------------------------------------------------------------------------------------------------------------------


If you found my response helpful, I would greatly appreciate it if you could mark it as "Accepted Solution" and "Helpful."
Your support not only benefits the community but also encourages me to continue assisting. Thank you so much!

Thanks and Regards
Ravi Gaurav | ServiceNow MVP 2025,2024 | ServiceNow Practice Lead | Solution Architect
CGI
M.Tech in Data Science & AI

 YouTube: https://www.youtube.com/@learnservicenowwithravi
 LinkedIn: https://www.linkedin.com/in/ravi-gaurav-a67542aa/

Go to solution
DoDo labs___
Mega Sage

‎01-21-2025 03:37 AM

Thank you all for your help!

0 Helpfuls