i am starting a new project. i need to create a ajax or jQuery to control the parent page's form submission when user click button in popup window.
click the button on submit form in parent window.
in submit form javascript before return of submit form function, i need to add a popup window (child window), there is a "Close" button.
the program will suspend until user click "Close" button in popup window. then the parent window need to detect the popup window close, once the popup window close, then it will continue submitform function going to return the form.
may i know how to prepare, any sample code for my reference.
function submitform(){
//validation checking
window.open(.., messageDialog, ''); //i want to popup a reminder message dialog, user need to click "Close" button once they read the message.
Accroding to your description,as far as I think,you could use modal to replace your messagedialog.When you click the submit button ,you could prevent submitting and show modal.After you closing the modal,the submit will continue.
More details,you could refer to below codes:
<script src="Scripts/jquery-3.2.1.min.js"></script>
<script>
$(function () {
var modal = $("#myModal");
$("form").submit(function(e){
alert('submit intercepted');
e.preventDefault(e);
modal.show();
});
$(".close").click(function () {
modal.hide();
})
})
</script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* 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>
<body>
<form id="form1" runat="server">
<input type='submit'/>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</form>
</body>
Best regards,
Yijing Sun
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
it will wait until user click close button in popup window?
refer your coding, you use alert(), as far as I know, alert will have 2 button by default, I want to custom popup window with only 1 button on it , user just click the button, the form will then continue to submit the form .
how to do that?
The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.In the form submit function,you need to cancel submit ,it will use preventDefault().Then you could show the popup
window,such as modal.Finally,when you close the modal ,you could continue the form submit.
Alert() in the codes,it tell you the submit event is intercepted instead of a popup window.
Besides,you could use modal or dialog to be the popup window.You could add closebutton in the modal.
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
my project has embedded js library and the element attribute does not has class attribute, I cant add <div class=.../>
my button contain type=submit, so when click on button, it call submitform js, how can I add popup window attribute in js and put it in window.open with close button on it, when user click the button, it will continue submit form ?
Accroding to your description,I suggest you could use window.open with a new window and set the window's width and height.It has close button.And you could check whether the window is close,and then you could continue submit the form.
Since you don't post your current codes,I create a demo and you could try.
function submitform(event) {
event.preventDefault();
var myWindow = window.open("", "MsgWindow", "width=600,height=600");
myWindow.document.write("<p>This is 'MsgWindow'. I am 600px wide and 600px tall!</p>");
var timer = setInterval(function () {
if (myWindow.closed) {
clearInterval(timer);
document.forms['form1'].submit();
}
}, 1000);
}
Best regards,
Yijing Sun
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Accroding to your description,as far as I think,you could use modal to replace your messagedialog.When you click the submit button ,you could prevent submitting and show modal.After you closing the modal,the submit will continue.
More details,you could refer to below codes:
<script src="Scripts/jquery-3.2.1.min.js"></script>
<script>
$(function () {
var modal = $("#myModal");
$("form").submit(function(e){
alert('submit intercepted');
e.preventDefault(e);
modal.show();
});
$(".close").click(function () {
modal.hide();
})
})
</script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* 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>
<body>
<form id="form1" runat="server">
<input type='submit'/>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</form>
</body>
Best regards,
Yijing Sun
my coding is as below.
function formSubmit(logon) {
popupwindow();
if(!modal.hide()){ //<-- how to check if modal div is hide, then continue the submit form function
return false;
}
if ($("#LogonForm").valid()) {
}
}
function popupwindow(){
//logonMethod.preventDefault(logon);
var modal = $("#Dialog_0");
modal.show();
}
function btnclose(){
var modal = $("#tafDialog_0");
$("#btnclose").click(function(){
modal.hide();
})
}
---html----
<body>
<div id="Dialog_0" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="tafDialog" style="display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); ">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">dialog title</h2></div>
<div class="modal-body">
<div id="infoDetail"><p>content 1</p>
</div>
</div>
<div class="modal-footer"><div class="btn-center">
<button id="btnclose" type="button" onclick="btnclose()" class="close">close</button>
</div>
</div>
</div>
</div>
</div>
Accroding to your description,as far as I think,you could use modal to replace your messagedialog.When you click the submit button ,you could prevent submitting and show modal.After you closing the modal,the submit will continue.
More details,you could refer to below codes:
<script src="Scripts/jquery-3.2.1.min.js"></script>
<script>
$(function () {
var modal = $("#myModal");
$("form").submit(function(e){
alert('submit intercepted');
e.preventDefault(e);
modal.show();
});
$(".close").click(function () {
modal.hide();
})
})
</script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* 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>
<body>
<form id="form1" runat="server">
<input type='submit'/>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</form>
</body>
Best regards,
Yijing Sun
I have tried to use your format as below for formatting <div> in <body>, however, I found that the <div> is not placed at the top of the page as it can cover by another <div>. any comment?
how to set the <div> is placed at the top ? not cover by another div which is also formatted z-index to 1.
---code as below---------------------
.modal {display: none;/* Hidden by default */position: fixed;/* Stay in place */z-index:1;/* Sit on top */padding-top:100px;/* Location of the box */left:0;top:0;width:100%;/* Full width */height:100%;/* Full height */overflow: auto;/* Enable scroll if needed */background-color:rgb(0,0,0);/* Fallback color */background-color: rgba(0,0,0,0.4);/* Black w/ opacity */}
I have tried to use your format as below for formatting <div> in <body>, however, I found that the <div> is not placed at the top of the page as it can cover by another <div>. any comment?
how to set the <div> is placed at the top ? not cover by another div which is also formatted z-index to 1.
Accroding to your description,I don't understand your requirment clealy.Could you tell us which the div is cover the other?What the div is not at the top?
Could you post your current codes and result to us?
Best regards,
Yijing Sun
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
how can i display a popup window only when i first time visit the page after logon. it will not prompt after re-visit the page after logon.
my popup code is as below, but it will popup window very time when i refresh/re-visit the page.
<body>
<style>
.modal_fade_in {
display: block;
position: fixed;
z-index: 999;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
</style>
<div id="tafDialog_01" class="modal_fade_in" tabindex="-1" role="dialog" aria-labelledby="tafDialog"/>
Accroding to your description,as far as I think,you could use modal to replace your messagedialog.When you click the submit button ,you could prevent submitting and show modal.After you closing the modal,the submit will continue.
More details,you could refer to below codes:
<script src="Scripts/jquery-3.2.1.min.js"></script>
<script>
$(function () {
var modal = $("#myModal");
$("form").submit(function(e){
alert('submit intercepted');
e.preventDefault(e);
modal.show();
});
$(".close").click(function () {
modal.hide();
})
})
</script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* 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>
<body>
<form id="form1" runat="server">
<input type='submit'/>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</form>
</body>
Best regards,
Yijing Sun
how can I trigger 1 time popup window after that page
Accroding to your description,as far as I think,you could use modal to replace your messagedialog.When you click the submit button ,you could prevent submitting and show modal.After you closing the modal,the submit will continue.
More details,you could refer to below codes:
<script src="Scripts/jquery-3.2.1.min.js"></script>
<script>
$(function () {
var modal = $("#myModal");
$("form").submit(function(e){
alert('submit intercepted');
e.preventDefault(e);
modal.show();
});
$(".close").click(function () {
modal.hide();
})
})
</script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* 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>
<body>
<form id="form1" runat="server">
<input type='submit'/>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</form>
</body>
Best regards,
Yijing Sun
can i control the dialog.show in another page's button ? when the previous page's button click, it will prompts the popup window when the page is loaded?
can i control the dialog.show in another page's button ? when the previous page's button click, it will prompts the popup window when the page is loaded?
Could you tell us why you want to control the dialog show in another page's button?
Accroding to your description,you want to open the dialog in the first time and refresh the page ,the dialog cann't show.
As far as I think,you could use cookie.
More details,you could refer to below codes:
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<script>
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
$(function () {
var cookieValue = readCookie('logged');
if (cookieValue !== "true") {
$("#dialog").dialog({
autoOpen: false
});
$("#Button2").click(function () {
event.preventDefault();
$("#dialog").dialog('open');
});
document.cookie = "logged=true";
}
})
</script>
<asp:Button ID="Button2" runat="server" Text="Show" />
<div id="dialog" hidden="hidden">
</div>
Best regards,
Yijing Sun
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
can i control the dialog.show in another page's button ? when the previous page's button click, it will prompts the popup window when the page is loaded?
Could you tell us why you want to control the dialog show in another page's button?
Accroding to your description,you want to open the dialog in the first time and refresh the page ,the dialog cann't show.
As far as I think,you could use cookie.
More details,you could refer to below codes:
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<script>
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
$(function () {
var cookieValue = readCookie('logged');
if (cookieValue !== "true") {
$("#dialog").dialog({
autoOpen: false
});
$("#Button2").click(function () {
event.preventDefault();
$("#dialog").dialog('open');
});
document.cookie = "logged=true";
}
})
</script>
<asp:Button ID="Button2" runat="server" Text="Show" />
<div id="dialog" hidden="hidden">
</div>
Best regards,
Yijing Sun
there is 2 button for different logic in logon page, but both button is redirected to same next.jsp after successful logon. but only A button will prompts the popup window when first time visit.
Could you tell us what is next.jsp?Is it a javascript file?Assumely,you have two button,the javascript were writed in the same javascript file.And you click the one of the buttons,it could popup window.
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
$(function () {
$("#Button1").click(function () {
alert(1);
});
var cookieValue = readCookie('logged');
if (cookieValue !== "true") {
$("#dialog").dialog({
autoOpen: false
});
$("#Button2").click(function () {
event.preventDefault();
$("#dialog").dialog('open');
});
document.cookie = "logged=true";
}
})
Best regards,
Yijing Sun
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
None
0 Points
84 Posts
control form submission in parent page when user click on button in popup window
Jun 15, 2020 04:08 PM|20141113|LINK
i am starting a new project. i need to create a ajax or jQuery to control the parent page's form submission when user click button in popup window.
may i know how to prepare, any sample code for my reference.
function submitform(){
//validation checking
window.open(.., messageDialog, ''); //i want to popup a reminder message dialog, user need to click "Close" button once they read the message.
if (window.close){
return;
}
}
Contributor
3730 Points
1427 Posts
Re: control form submission in parent page when user click on button in popup window
Jun 16, 2020 05:47 AM|yij sun|LINK
Hi 20141113,
Accroding to your description,as far as I think,you could use modal to replace your messagedialog.When you click the submit button ,you could prevent submitting and show modal.After you closing the modal,the submit will continue.
More details,you could refer to below codes:
<script src="Scripts/jquery-3.2.1.min.js"></script> <script> $(function () { var modal = $("#myModal"); $("form").submit(function(e){ alert('submit intercepted'); e.preventDefault(e); modal.show(); }); $(".close").click(function () { modal.hide(); }) }) </script> <style> body { font-family: Arial, Helvetica, sans-serif; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* 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> <body> <form id="form1" runat="server"> <input type='submit'/> <!-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">×</span> <p>Some text in the Modal..</p> </div> </div> </form> </body>Best regards,
Yijing Sun
None
0 Points
84 Posts
Re: control form submission in parent page when user click on button in popup window
Jun 16, 2020 01:22 PM|20141113|LINK
it will wait until user click close button in popup window?
refer your coding, you use alert(), as far as I know, alert will have 2 button by default, I want to custom popup window with only 1 button on it , user just click the button, the form will then continue to submit the form .
how to do that?
Contributor
3730 Points
1427 Posts
Re: control form submission in parent page when user click on button in popup window
Jun 17, 2020 06:31 AM|yij sun|LINK
Hi 20141113,
The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.In the form submit function,you need to cancel submit ,it will use preventDefault().Then you could show the popup window,such as modal.Finally,when you close the modal ,you could continue the form submit.
Alert() in the codes,it tell you the submit event is intercepted instead of a popup window.
Besides,you could use modal or dialog to be the popup window.You could add closebutton in the modal.
You could have a try the sample codes.
More details,you could refer to below article:
https://www.w3schools.com/jsref/event_preventdefault.asp
Best regards,
Yijing Sun
None
0 Points
84 Posts
Re: control form submission in parent page when user click on button in popup window
Jun 18, 2020 02:45 PM|20141113|LINK
my button contain type=submit, so when click on button, it call submitform js, how can I add popup window attribute in js and put it in window.open with close button on it, when user click the button, it will continue submit form ?
Contributor
3730 Points
1427 Posts
Re: control form submission in parent page when user click on button in popup window
Jun 19, 2020 03:25 AM|yij sun|LINK
Hi 20141113,
Accroding to your description,I suggest you could use window.open with a new window and set the window's width and height.It has close button.And you could check whether the window is close,and then you could continue submit the form.
Since you don't post your current codes,I create a demo and you could try.
More details,you could refer to below codes:
<script src="windowpopup.js"></script> <form id="form1" action="/HtmlPage3.html"> <input id="Text1" type="text" /> <input id="Submit1" type="submit" value="submit" onclick="submitform(event)" /> </form>windowpopup.js:
function submitform(event) { event.preventDefault(); var myWindow = window.open("", "MsgWindow", "width=600,height=600"); myWindow.document.write("<p>This is 'MsgWindow'. I am 600px wide and 600px tall!</p>"); var timer = setInterval(function () { if (myWindow.closed) { clearInterval(timer); document.forms['form1'].submit(); } }, 1000); }Best regards,
Yijing Sun
None
0 Points
84 Posts
Re: control form submission in parent page when user click on button in popup window
Jun 19, 2020 03:46 AM|20141113|LINK
my coding is as below.
function formSubmit(logon) {
popupwindow();
if(!modal.hide()){ //<-- how to check if modal div is hide, then continue the submit form function
return false;
}
if ($("#LogonForm").valid()) {
}
}
function popupwindow(){
//logonMethod.preventDefault(logon);
var modal = $("#Dialog_0");
modal.show();
}
function btnclose(){
var modal = $("#tafDialog_0");
$("#btnclose").click(function(){
modal.hide();
})
}
---html----
<body>
<div id="Dialog_0" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="tafDialog" style="display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); ">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">dialog title</h2></div>
<div class="modal-body">
<div id="infoDetail"><p>content 1</p>
</div>
</div>
<div class="modal-footer"><div class="btn-center">
<button id="btnclose" type="button" onclick="btnclose()" class="close">close</button>
</div>
</div>
</div>
</div>
</div>
</body>
-----------------------------------------end coding--------------
//logonMethod.preventDefault(logon); <- - it can't use the preventDefault with error
how can I check if the popup dialog is hide, then continue the submit form function? I try the following coding, but fails....
if(!modal.hide()){ //<-- how to check if modal div is hide, then continue the submit form function
return false;
}
None
0 Points
84 Posts
Re: control form submission in parent page when user click on button in popup window
Jun 22, 2020 10:27 AM|20141113|LINK
I have tried to use your format as below for formatting <div> in <body>, however, I found that the <div> is not placed at the top of the page as it can cover by another <div>. any comment?
how to set the <div> is placed at the top ? not cover by another div which is also formatted z-index to 1.
---code as below---------------------
.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ }
-----end ----------------------------
Contributor
3730 Points
1427 Posts
Re: control form submission in parent page when user click on button in popup window
Jun 23, 2020 06:29 AM|yij sun|LINK
Hi 20141113,
Accroding to your description,I don't understand your requirment clealy.Could you tell us which the div is cover the other?What the div is not at the top?
Could you post your current codes and result to us?
Best regards,
Yijing Sun
None
0 Points
84 Posts
Re: control form submission in parent page when user click on button in popup window
Jun 23, 2020 07:19 AM|20141113|LINK
how can i display a popup window only when i first time visit the page after logon. it will not prompt after re-visit the page after logon.
my popup code is as below, but it will popup window very time when i refresh/re-visit the page.
<body>
<style>
.modal_fade_in {
display: block;
position: fixed;
z-index: 999;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
</style>
<div id="tafDialog_01" class="modal_fade_in" tabindex="-1" role="dialog" aria-labelledby="tafDialog"/>
None
0 Points
84 Posts
Re: control form submission in parent page when user click on button in popup window
Jun 24, 2020 04:03 AM|20141113|LINK
how can I trigger 1 time popup window after that page
None
0 Points
84 Posts
Re: control form submission in parent page when user click on button in popup window
Jun 25, 2020 04:07 PM|20141113|LINK
can i control the dialog.show in another page's button ? when the previous page's button click, it will prompts the popup window when the page is loaded?
Contributor
3730 Points
1427 Posts
Re: control form submission in parent page when user click on button in popup window
Jun 26, 2020 06:11 AM|yij sun|LINK
Hi 20141113,
Could you tell us why you want to control the dialog show in another page's button?
Accroding to your description,you want to open the dialog in the first time and refresh the page ,the dialog cann't show.
As far as I think,you could use cookie.
More details,you could refer to below codes:
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" /> <script> function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; } $(function () { var cookieValue = readCookie('logged'); if (cookieValue !== "true") { $("#dialog").dialog({ autoOpen: false }); $("#Button2").click(function () { event.preventDefault(); $("#dialog").dialog('open'); }); document.cookie = "logged=true"; } }) </script> <asp:Button ID="Button2" runat="server" Text="Show" /> <div id="dialog" hidden="hidden"> </div>Best regards,
Yijing Sun
None
0 Points
84 Posts
Re: control form submission in parent page when user click on button in popup window
Jun 26, 2020 06:38 AM|20141113|LINK
there is 2 button for different logic in logon page, but both button is redirected to same next.jsp after successful logon. but only A button will prompts the popup window when first time visit.
can I do that?
Contributor
3730 Points
1427 Posts
Re: control form submission in parent page when user click on button in popup window
Jun 26, 2020 09:30 AM|yij sun|LINK
Hi 20141113,
Could you tell us what is next.jsp?Is it a javascript file?Assumely,you have two button,the javascript were writed in the same javascript file.And you click the one of the buttons,it could popup window.
If my guessing is right,you could do this:
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" /> <script src="Scripts/next.js"></script> <asp:Button ID="Button2" runat="server" Text="Show" /> <asp:Button ID="Button1" runat="server" Text="Button" /> <div id="dialog" hidden="hidden"> </div>js:
function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; } $(function () { $("#Button1").click(function () { alert(1); }); var cookieValue = readCookie('logged'); if (cookieValue !== "true") { $("#dialog").dialog({ autoOpen: false }); $("#Button2").click(function () { event.preventDefault(); $("#dialog").dialog('open'); }); document.cookie = "logged=true"; } })Best regards,
Yijing Sun