Develop Reference

show a modal on a different file after completing registration on another file

I have a registration button when I click on it to submit and if registration is successful, will redirect to another page and THEN show the modal I have what code should I have to achieve this?
REGISTRATION:
<input type="submit" class="btn form-control color-white mwc-orange-background-color" id="register" name="register" value="REGISTER">
MODAL: (again this is the HTML file that registration redirects to if successful and submitted)
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Welcome, New White Card Holder!</h2>
</div>
<div class="modal-body">
<h3>Congratulations! you are entitled for a 30-day free trial of our <img src="../img/ribbon-elite.png" class="small-icon"> Elite Membership.</h3>
<h3>You may begin browsing our cards right away as soon as you close this window</h3>
<h3>Also, if you wish to avail of our other membership options, click here.</h3>
<h3>Enjoy a wealth of deals for wellness!</h3>
<br>
</div>
</div>
</div>
I have this javascript the triggers the modal but id like to know how to do this when the registration is submitted.
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
I think I can't exactly place the modal in the registration file since it just redirects to another page.
will appreciate any coded help given thank you
UPDATE: heres what i tried based on the example provided
<?php
if(isset($_POST['register']) && $_POST['register'] == 'REGISTER') {
?>
<script>
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<?php
}
?>
my if condition "if(isset($_POST['register']) && $_POST['register'] == 'REGISTER')" is the same line that works when a registration is valid. i assumed it will do the same with ".modal('show')" but the modal does not show up.
PS. i added that if condition on the page that gets redirected after registration is successful.

Does registration redirect to some general page that could be opened with or without modal?
If so you could use GET parameter.
For example some-page?showModal=true
Then based on value of that parameter you could decide whether show or not modal onLoad of given page.

Make a session active after successful form submit and show the modal if that session is active. Refer following code:
<?php
if($_POST)
{
//Your code goes here
......
$_SESSION["msg_succ"]=true;
}
if(isset($_SESSION["msg_succ"])){
?>
<script>
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<?php
}
?>

Javascript create button and trigger onclick function on HTML

I'm facing an issue , where the javascript is responsible to create the button then show it on HTML( Pop up box ).
Once it's created, i want the user to freely click a button to close it.
The workaround is by setting the modal.style.style=display
.
In the HTML:
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class='modal-header'>
<span class='close'>×</span>
<div id ="sub" >
</div>
</div>
I have a function to create a modal box upon getting success variable, i'm appending to the id sub.
div.innerHTML =
"<div id=''><span class='close'><input type='image' id='vicious' onclick='clear()' style='width:100%;' border='0' src='images/DUK.png' ></span></div>"
When it shows on HTML, i want to trigger an onclick function to close this modal box.
Because everything is created by the javascript, so I think the issue it's not triggering any line.
I've tried creating an onclick function to trigger
var modal = document.getElementById('myModal');
function clear(){
modal.style.display = "none";
}
I've also tried
var modal = document.getElementById('myModal');
var vicious = document.getElementById("vicious");
vicious.onclick = function() {
modal.style.display = "none";
}
I'm out of idea, could someone guide me?
Thanks in advance.
JSBIN: http://jsbin.com/rusapudodo/edit?html,js,output

As you are using jQuery, you can achieve hiding of modal as per below steps,
Remove binding of click event, onclick='clear()'. This is not needed.
Bind listener to the element with id as vicious using,
$('#vicious').click(function() {
$('#myModal').modal('hide');
});
Alternatively try the following approach,
$("#vicious").on("click", function(e){
$("#modal").modal("hide");
e.stopPropagation();
});
Stop the event from bubbling up.
If you want to use vanilla javaScript onlt then include the following code after you set the inner html,
var btn = document.getElementById("vicious");
btn.onclick = function() {
alert();
modal.style.display = "none";
}

You can try something like that :
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class='modal-header'>
<span class='close' onclick="close()">×</span>
<div id="sub">
</div>
</div>
</div>
</div>
<script>
function close(){
document.getElementById('myModal').style.display = 'none';
}
</script>

You need to move the selector inside the function:
function clear() {
var modal = document.getElementById('myModal');
modal.style.display = "none";
}
EDIT: using your second technic:
div.innerHTML = ...;
var vicious = document.getElementById("vicious");
vicious.onclick = clear;

For disabling button, you can use the below code
$("#button0000000001").find("button").attr("disabled", true);

Show fancybox with class instead of id

I am at the beginning to learn Javascript. And I hope you can help me.
I want to use a fancybox if someone clicked on a link with a class attribute. I have done it also with an id. With id attributes the code works very fine. But if I cange it with class attributes it doesn´t work.... :(
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- 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>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
This code works very fine. But why don´t work this one with only class attributes? The code have also the same element as the upper one. Only the following lines of codes have been changed.
<button class="myBtnNew">Open Modal New</button>
var myBtnNew = document.getElementsByClassName("myBtnNew");
myBtnNew.onclick = function() {
modal.style.display = "block";
}
Thank you for your help...

getElementsBy as it says, resturns multiple elements, a list. So myBtnNew is a list of elements and the list does not have an onclick. So just add the [0] as you did with span :
var myBtnNew = document.getElementsByClassName("myBtnNew")[0];

document.getElementsByClassName returns an array of objects, not just one object. Use this:
var myBtns = document.getElementsByClassName("myBtnNew");
myBtns[0].onclick = function() {
modal.style.display = "block";
}

Javascript modal requires two clicks to open

The code should open a modal window after a click on the button but the first time you want to open it, it requires two clicks on the button to open it.
I encoutered this problem after copying some code from W3Schools and modifying it so it fits inside my JS file.
HTML
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn" onclick="modalFunction()">Open Modal</button>
<!-- 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>
Javasript
function modalFunction() {
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}

If you move your event load handlers outside the function it will work as expected.
Here I simply removed the function and the inline script handler.
I also change the onlick to the newer addEventListener, and here's a good answer explaining their differences: addEventListener vs onclick
Note that the script needs to be runned at page load, not before
// Make sure DOM is loaded before access any of its elements
window.addEventListener('load', function() {
// Get the modal
var mdl = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var spn = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.addEventListener('click', function(ev) {
mdl.style.display = "block";
// Prevent event bubbling (so in this case the window listener
// won't catch the event and simply close it immediately)
ev.stopPropagation();
});
// When the user clicks on <span> (x), close the modal
spn.addEventListener('click', function() {
mdl.style.display = "none";
});
// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(ev) {
if (!mdl.contains(ev.target)) {
mdl.style.display = "none";
}
});
});
.modal {
position: relative;
display: none;
border: 1px solid black;
}
.close {
position: absolute;
display: block;
color: white;
background: red;
padding: 3px 5px;
right: 0;
top: 0;
}
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close"> X </span>
<p>Some text in the Modal..</p>
</div>
</div>

Can't Create more than one Button Modal

I duplicate my modal button and The problem is I can't show "Open Modal 2" in my code.
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
Here is my complete code:
https://jsfiddle.net/dedi_wibisono17/xn3npwc4/
What should I do? Thank You

You should use different ID for your "Open Modal 2" elements.
According to definition and usage from W3School,
the getElementById() method accesses the first element with the specified id.

In my humble opinion you ignored what id means
Two button's ids are same which captions are Open Modal and Open Modal2
So btn variable is connected with only first element which id is myBtn
var btn = document.getElementById("myBtn");
Thanks

Try this. Hope it helps :)
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- 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>
<button id="myBtn2">Open Modal 2</button>
<!-- 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>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
var btn2 = document.getElementById("myBtn2");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
btn2.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

You have same id for yours button "Open Modal" and "Open Modal 2". When you write var btn = document.getElementById("myBtn"); then you got first of two of yours button. And any events you bind only for this first button. So you need to change id of second button for something like 'myBtn1' and use something like this piece of code to set event handlers:
function setModal(btn,modal) {
btn.onclick=function() {
modal.style.display="block";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var span=modal.querySelectorAll(".close") [0];
span.onclick = function() {
modal.style.display = "none";
}
};
setModal(document.getElementById("myBtn"),document.getElementById('myModal'));
setModal(document.getElementById("myBtn1"),document.getElementById('myModal'));
I've modified your fiddle here: https://jsfiddle.net/1fgmfpfc/

Your HTML id conflict in Javascript ,it's a major issue of your code. document.getElementById always bind your upper HTML code like as when u change your modal2 code upper above than modal1 then modal2 open but not open in modal1, so define different HTML id or try to dynamic name of HTML id.