Skip to content

Instantly share code, notes, and snippets.

@sroy8091

sroy8091/gozerwm.markdown

Created September 30, 2022 03:25
Show Gist options
  • Save sroy8091/80249085ba23f33e0f7a20bb71530905 to your computer and use it in GitHub Desktop.
Save sroy8091/80249085ba23f33e0f7a20bb71530905 to your computer and use it in GitHub Desktop.
Download ZIP
gOzerWM
Raw
index.html
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<title>Jira Service Desk</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="main-form">
<div class="container col-md-offset-4">
<div class="row justify-content-left" style="margin-top:20px;">
<h3>DEMO PROJECT</h3>
<p>Welcome to Demo service project's portal! Try the example forms (we call them Request types)
to practice requesting help like your customers would. To edit these request type forms, visit the
Request types page inside project settings.
</p>
</div>
<form id="myForm" onsubmit="openModal()">
<div class="form-group" col>
<label for="exampleFormControlSelect1">Contact Us About</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>General</option>
<option>Need Approval</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Raise a request on behalf of</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Summary</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="1"></textarea>
</div>
<label>Describe the issue in detail</label>
<div class="form-group">
<textarea id="editor"></textarea>
</div>
<div class="form-group">
<label for="myfile">Add attachments</label>
<input type="file" id="myfile" name="myfile">
</div>
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Submit</button>
<button type="reset" class="btn">Cancel</button>
</form>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Request successfully submited</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
</div>
</div>
</div>
<div></div>
</body>
</html>
Raw
script.js
$("#myForm").on("submit", function (e) {
$("#exampleModal").modal("show");
e.preventDefault();
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js"></script>
Raw
style.css
.container {
width: 200px;
height: 200px;
position: relative;
/* margin: 20px; */
background: #fff;
}
.box {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.8; /* for demo purpose */
}
.stack-top {
z-index: 9;
margin: 20px; /* for demo purpose */
}
.main-form {
background: #0061ff;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment