How to open a pop-up window with lock the remaining screen in HTML?
source link: https://www.codesd.com/item/how-to-open-a-pop-up-window-with-lock-the-remaining-screen-in-html.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How to open a pop-up window with lock the remaining screen in HTML?
i am trying to open a popup in my screen where i can lock the remain screen so that the user can only select something from my popup or can cancel the popup. Basically i need to pass some value from a jsp form to my popup, that i had done but i also need to lock the remaining screen that i am not able to do so far. Thanks.
This is how i am calling the jQuery
<a href="#" class="modalInput" rel="#prompt">Download</a>
This is my Script
<script>
$(document).ready(function() {
var triggers = $(".modalInput").overlay({
mask: {
color: '#555555',
loadSpeed: 200,
opacity: 0.9
},
closeOnClick: false
});
var buttons = $("#yesno button").click(function(e) {
var yes = buttons.index(this) === 0;
triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
});
$("#prompt form").submit(function(e) {
triggers.eq(1).overlay().close();
var input = $("input", this).val();
triggers.eq(1).html(input);
return e.preventDefault();
});
});
</script>
This is my Form
<font face=arial bgcolor=""><b><center>
<form id="myForm" name="myForm" method="post" action="SentMail" onsubmit="return validateForm(this)">
<div class="modal" id="prompt" >
<div id="">
<table width="100%" border="0" cellspacing="0" cellpadding="5" align="center">
<tr>
<td align="right" valign="middle"> </td>
<td align="right" valign="middle"><span style="color:#F00">*</span> Mandotary Field</td>
</tr>
<tr>
<td width="28%" align="right" valign="middle"><strong>Name:</strong><span style="color:#F00">*</span></td>
<td width="72%" align="left" valign="middle"><label for="textfield"></label>
<div class="out-border">
<input name="name" type="text" class="comm-text" id="name" style="width:250px" placeholder="Name"/></div></td>
</tr>
<tr>
<td align="right" valign="middle"><strong>Email:</strong><span style="color:#F00">*</span></td>
<td align="left" valign="middle"><label for="textfield2"></label>
<div class="out-border">
<input name="Email" type="text" class="comm-text" id="Email" style="width:250px" placeholder="Email"/></div></td>
</tr>
<tr>
<td align="right" valign="middle"><strong>Contact No.:</strong></td>
<td align="left" valign="middle"><label for="textfield2"></label>
<div class="out-border">
<input name="contact" type="text" class="comm-text" onkeypress="return isNumberKey(event)" maxlength="10" id="contact" style="width:250px" placeholder="Contact Number"/></div></td>
</tr>
<tr>
<td align="left" valign="middle"> </td>
<td align="left" valign="middle"><input type="submit" name="signIn" value="Submit" class="button green"> </input>
<input type="button" name="signIn" value="Close" class="close"> </input></td>
</tr>
</table>
</div></div>
</form>
</center></b></font>
You might want to look into jQuery UI - especially Dialog and the modal option.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK