Is it possible to make a popup dialog responsive and fixed to the middle of the screen, even if the window is scrolled vertically, the popup dialog will still be in the middle and when the browser is minimized, the popup dialog will be responsive and adjust accordingly?
Javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
function ShowPopup() {
$("#dialog").dialog({
title: "Add Option",
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true,
width: "60%"
});
$("#dialog").parent().appendTo($("form:first"));
}
</script>
HTML
<div id="dialog" style="display: none">
<asp:HiddenField ID="hfBallotQuestion" runat="server" />
<div class="row" style="width: 100%;">
<div class="col-sm-8">
<label>Title/Name</label><br />
<asp:TextBox runat="server" CssClass="form-control" ID="txtCandidateName" />
<label>Short Bio</label><br />
<asp:TextBox runat="server" CssClass="form-control" ID="txtShortbio" TextMode="MultiLine" Style="overflow: hidden; resize: none;" oninput="Resize(this)" />
<script type="text/javascript">
function Resize(textbox) {
textbox.style.height = "";
textbox.style.height = Math.min(textbox.scrollHeight, 300) + "px";
}
</script>
</div>
<div class="col-sm-4">
<asp:Image ID="imgFileUpload" ImageUrl="Test.png" runat="server" Width="60" Height="60" />
<br /><br />
<asp:FileUpload ID="FUpload" runat="server" onchange="showpreview(this)" />
</div>
</div>
<br />
<asp:Button Text="Add Candidate" runat="server" OnClick="OnAdd" />
</div>
