I have a div "button" that opens a popup. When you click on the popup, it runs
function theFunctionAbout() {
var popup = document.getElementById("thePopupAbout");
popup.classList.add("show");
}
and it will add show, which is visibility:visible;
when you click a button in the popup, it runs
function theFunctionAboutClose(){
var popup = document.getElementById("thePopupAbout");
popup.classList.add("hide");
}
and it will add hide, which runs display:none;.
After hitting the button, the popup closes, but never opens again. How do i fix this?
I have tried switching add.("hide") to remove.("show"). This works on another popup where the popup window is part of a dive form element, and that popup is reopenable, However, my popup window here has a paragraph element. When i tried to do remove.("show") on my about popup, the button would not close the window.
My button:
<div class="aboutPopup" onclick="theFunctionAbout()">About
<p class="aboutPopupText" id="thePopupAbout">
<span class="aboutPopupInfo">
Mathalassa is a fun and educational math game that offers students from varying ages and grades to learn and perfect their math skills.
</span>
<button class="aboutPopupClose" onclick="theFunctionAboutClose()">x</button>
</p>
</div>
Another button:
<div class="oldUserPopup" onclick="theFunctionOld()">Old User
<form class="oldUserPopupText" id="thePopupOld">
<label class="oldUserPopupInfo" for="name">Please Enter Your Username:</label>
<div class="form-grp">
<input class="inputNameHere" type="text" name="username" id="user" required minlength="2" maxlength="15" size="10" >
</div>
<div class="form-grp">
<input class="inputSubmit" type="Submit" name="login-btn" id="user">
</div>
<button class="oldUserPopupClose" onclick="theFunctionOldClose()">x</button>
</form>
</div>
instead of using two differents fonctions for open/close the popup you can use element.classList.toggle("hide"); which will create less problems for the hierarchy of the css of each class
When you are using the add method you're appending a class to existent classes.
let's say you've shown and hidden the element several times your element className string would be as the following:
class="...other_classes show hide show hide show hide"
and you don't want that so replace the two function with the following so when you add hide class you'll remove show and so on...
function theFunctionAbout() {
var popup = document.getElementById("thePopupAbout");
popup.classList.remove("hide");
popup.classList.add("show");
}
function theFunctionAboutClose(){
var popup = document.getElementById("thePopupAbout");
popup.classList.remove("show")
popup.classList.add("hide");
}
Related
I have a blog that has a reply form for each comment on the blog. I am trying to create a "Reply" button that would show the form once its clicked. Right now, if I click any "Reply" button it will only apply the hide style to the first button and the block style to the first div.
HTML
<div class="reply">
<button id="replybutton" onclick="replybutton()">Click Me</button>
<div id="replyform">
<form>
...
</form>
</div>
</div>
HTML
function replybutton() {
document.getElementById("replyform").style.display = "block";
document.getElementById("replybutton").style.display = "none";
enter code here
The id are supposed to be unique. So each form should have a unique id. You can use a common class to show/hide them.
When you click a button you should pass its reference to your onClick function like this onclick="replybutton(this) and modify your onClick function to target the button function replybutton(btn). If you want to show/hide your form you can use the nextElementSibling
See the jsFiddle
https://jsfiddle.net/th4dz1q0/2/
I am creating a registration form where its contents are contained in DIV (hidden), then when the user clicks a button, the modal shows and the content is loaded through the ID of the DIV.
However, I am encountering a problem where the button of the DIV is not recognized in my script. I assigned a click event using jquery, but it doesn't work. Probably because the hidden DIV has conflicts with the DIV create in the modal (which will eventually have the same IDs).
Here is my script:
$('#addCollege').click(function(e){
modal.open({content: $('#addCollegeForm').html()});
e.preventDefault();`
});
This is the DIV
<div id="addCollegeForm" style="display:none">
<label>College:</label><br>
<input type="text" placeholder = "Enter college name here..." id = "collegeDescription" > <br>
<input type="button" value="Save" id= "addCollege">
</div>
Thanks and I appreciate your help.
I wrote a dialog plugin for bootstrap, and got a similar problem.
I want to pop up an existing dom element.
Here is solution:
$targetElement.detach().appendTo($window.find('.modal-body')) // $targetElement is an existing dom
Detach element and append it to container.
Don't forget to revert the element to old container.
Hope it helps.
Regards
Try moving the button that opens your dialog out of the dialog:
EDIT - something like this should work...
HTML...
<div id="addCollegeForm">things in your dialog</div>
<input type="button" value="open dialog" id="addCollege">
jquery...
$("#addCollegeForm").dialog({
autoOpen: false
});
$('#addCollege').click(function () {
$("#addCollegeForm").dialog("open");
});
http://jsfiddle.net/DTq6m/
http://api.jqueryui.com/dialog/#option-autoOpen
i have small-image class when i click on it megnefic popup open. in my megnific popup there is big image of clicked image and one button with other-form-opener class when i click on button other-form-div class with form comes up with my custom popup in this part when i click on form element they dont work as default.
<div class="megnific_opener"><img class="small-image" ></div>
<div class="megnific_popup_div">
<img class="big-image">
more-info
</div>
<div class="other-form-div">
<form>
<input type="text">
<input type="text">
<input type="text">
</form>
</div>
i give stucture of my html and i already cheked that there is not a z-index problem.
so please help me thank you.
here is my demo in jsfiddle : http://jsfiddle.net/QHh7W/
Please use Magnific popup callbacks and move your custom html inside Magnific popup when opened and move it inside body when closed. You can check below working demo.
jsFiddle demo
Although i cannot get this working as per your that is opening both popups one above another in same window.
but in case you need it like this : open second after clicking from one.
http://jsfiddle.net/yDvvQ/5/
I have added different instance of megnific for both divs.
It is working for both popups, content and form both.
You can later amend it to add more popups or return to first from second.
Please review once and comment.
Regards
I have a modal window but I want to set up a close function so that when the user clicks on the "button", it will close the modal window. Does anyone know how this can be achieved?
I have a link to the application so you can view it here
Below is the javascript code where it shows the function of opening the modal window and the setup function of where I want to place the code to close the modal window:
function plusbutton() {
$(".previouslink").modal();
return false;
}
function closewindow() {
return false;
}
Below is the form code where user clicks on the plus button and it displays the content within the "previouslink" div tag:
<form id="QandA" action="imageupload.php" method="post">
<h1>CREATING QUESTIONS AND ANSWERS</h1>
<table id="plus" align="center">
<tr>
<th><a onclick="return plusbutton();">
<image src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage"/>
</a><span id="plussignmsg">(Click Plus Sign to look <br />
up Previous Questions)</span> </th>
</tr>
</table>
<div class="previouslink">
<h1>PREVIOUS QUESTIONS</h1>
<button type="button" id="close" onclick="return closewindow();">Close
</button></div>
</form>
Your Live-Example shows me, that you seem to be using SimpleModal
From the documentation:
CLOSING THE DIALOG
SimpleModal will automatically bind the close
function (using the onclick event) to any element inside the dialog
with the simplemodal-close class. In addition, you can
programmatically close the currently opened dialog by calling
$.modal.close();
Means: In your closeWindow()-Function, you could simply enter the line:
$.modal.close();
and be done.
I've used this jQuery reveal modal plugin on several sites and it has worked great for me.
Alternatively, you should check out jQuery Impromptu. I love the tour feature myself, but the modals are more likely what you are trying to accomplish.
The code from both examples will probably lead you to what you are specifically looking for :)
Hello Friends
I want to upload a image but according to requirement when click on button a pop window display and inner part of pop window display browse field using code something like
<form action="index.php" method="post" onsubmit="">
<div><label>Name:</label> <input type="text" name="form[name]" /></div>
<div><label>File:</label> <input type="file" name="form[file]" /></div>
<div><input type="submit" value="SUBMIT" /></div>
</form>
actually i want to show this browse field in pop-up window.
Please reply me regard this
Thanks
Just give a myform ID to your form hide it, using display:none; and try this code
Show Browse
UPDATE
I have created a demo of what you wanted. Check it here http://jsfiddle.net/Starx/rVw9M/
Since you are unfamilier with jquery, you need jquery library for this to run put this in your head (HTML Pages' Head :D)
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
Basically, here is how you could achieve that (just off the top of my head):
a) Create a new separate page and move your code into this page
b) On the existing page create a DIV and add IFRAME into it which would be pointed to that new page, e.g.
<div class="uploader" style="display: none;">
<iframe scrolling="no" style="width: 100%; height: 100%;" src="url"></iframe>
</div>
c) Download and add some modal popup plugin - personally, I prefer SimpleModal
d) Now you can show your popup by calling modal() method on the .uploader class, something like this..
Show Uploader