Hi there All, I have created a custom modal that get input, The modal contain a text area and a button.
End-user First Fill text area and then press submit button.
I have created that modal in HTML, and imported the web resource as JS file ! ( is it right? )
Note that I have custom ribbon button( I have customized it via ribbon workbench) and wanna when the ribbon button clicked this modal appear and when submitted, text entered in the modal fill out one filed and be closed.
My First Question is about that how to display this custom HTML?
I have tryed this Html and JS in one File and imported as web resource :
<!DOCTYPE html><html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*body {font-family: Arial, Helvetica, sans-serif;}*/
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 10; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: auto; /* Full width */
height: auto; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgb(0,0,0,0.4); /* Black w/ opacity */
text-align: center;
}
.text-area {
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color:rgb(211, 211, 211);
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
text-align: center;
}
.button {
background-color: rgb(128, 128, 128);
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
<meta charset="utf-8"></head>
<body>
<!-- The Modal -->
<div class="modal" id="myModal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Enter the text</p>
<textarea class="text-area"> </textarea>
<button class="button" id="submitBtn"> submit</button>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
var modalBtn= document.getElementById("submitBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
function displayOnClick() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body></html>
And I call displayOnClick function in command to appear this dialog.
Note that I think the URL does not need for this purpose.
Any help will appreciate.
