Pop up message on Service Portal

[babarat1]

Hello All,

I have a custom widget and I am trying to show some message on load via a Modal popup. However I have multiple Modals on same HTML so I have renamed the id of the below Modal and trying to open it on load when the Widget loads. Below are my scripts

HTML

  <div id="myModal2" class="modal">
<div class="modal2-content">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>  
  </div>

client

	$(window).on('load', function() {
		document.getElementById("myModal2").style.display = "block";
	});

css for other Modals in generic

.navbar {    
  border: 0;
  background-color:#f0f5f5;
}

.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: #FFFFFF;
  color: blue;
  padding: 16px 20px;
  border: #808080;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  top: 23px;
  right: 28px;
  width: 280px;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  top: 0;
  right: 15px;
  border: 3px solid #ADD8E6;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 550px;
  padding: 10px;
  background-color: white;
  border: black;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  /*width: 100%;
  padding: 15px;
  background: white;
  border: black;*/
  margin: 5px 0 22px 0;


}


/* Set a style for the submit/login button */
.form-container .btn {
  /*background-color: #04AA6D; */
  color: black;
  /*padding: 16px 20px;*/
  border: black;
  cursor: pointer;
  /*width: 100%;*/
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: none;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

.form-popup
{
  Position: Absolute
    Top: 5%
    Right: 5%
}

.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #cccccc;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}


.modal-dialog {  
  vertical-align: middle;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #eeeeee;
  padding: 1rem 1.5rem;
  width: 24rem;
  border-radius: 0.5rem;
}

.show-modal {
  opacity: 1;
  visibility: visible;
  transform: scale(1.0);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

.btn { 
  border: #000000;  
  padding: 92px 96px;
  font-size: 16px;
  cursor: pointer;
}

.panel {
    border-width:0;
    box-shadow:none;
}

Help really appreciated. Thanks

@Ankur Bawiskar @Community Alums @Mohith Devatte @Mark Roethof @Gunjan Kiratkar @portalguy @RaghavSh 

[Hafsa Asif]

Please use this HTML inside the widget HTML (the one which you are using for the modal)

[babarat1]

Yes I am doing that on the widget "test_demo_abc_form" and passing to the code as below

from other widget widget 2

spModal.open({
title: 'Header',
widget: 'test_demo_abc_form',
buttons: [{label: '${Ok}', cancel: true}],
widgetInput: {
parameterName: 'abc' //only needed if your embedded widget needs any input from this page
}
});

[Hafsa Asif]

Would you be comfortable sharing your PDI credentials on DM or maybe sharing your screen to debug the issue?