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]

If you want to just show a message and not take any input, try using spModal. You can simply do it like 

spModal.alert('Modal body');

If you want to add more options or use an embedded widget, use spModal like this

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

[babarat1]

Hi Asif, Thanks for the reply. So should I create a new widget and follow the above steps and call the widget sys id to the code?

[Hafsa Asif]

Yes, create a new widget and call the widget id (not the sys_id). Hopefully that will work

[babarat1]

Hi again @Hafsa Asif ,

I tried and I was able to populate the Widget as a pop up however the Modal body content does not appear inside the modal pop up

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Here are the roles you can add/remove using this request:</p>
<p>
Test ABC

</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>

like not the content inside <p>