8

How to open a pop-up window with lock the remaining screen in HTML?

 2 years ago
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.
neoserver,ios ssh client

How to open a pop-up window with lock the remaining screen in HTML?

advertisements

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.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK