how to close a modal window using a button click - javascript

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 :)

Related

Bootstrap Confirmation: Detect open and close states?

I am trying to detect when the bootstrap confirmation is opened and closed but I am having no luck with detecting this. I am using an <a> tag to trigger the confirmation (code down below), and trying to detect this is jquery.
<a class="delete" data-toggle="confirmation" title="" data-original-title="Delete Row?">
<i class="fa fa-trash-o"></i>
</a>
I originally tried to detect the button click but failed in doing so. It would be better if the confirmation is able to trigger a function once opened and closed.
You may you "data-on-confirm" and "data-on-cancel" attributes to register your callbacks for those particular events.These are given in the documentation provided by the bootstrap confirmation plugin.
Eg
<button class="btn btn-default" data-toggle="confirmation" data-singleton="true" data-on-confirm="myAcceptFunction" data-on-cancel="myRejectFunction">Confirmation 1</button>
Use events, e.g.:
var modalIsShown = false;
$('#myModal').on('shown.bs.modal', function () {
modalIsShown = true;
});
$('#myModal').on('hidden.bs.modal', function () {
modalIsShown = false;
});
http://getbootstrap.com/javascript/#modals-events
I ended up finding my answer thanks to the other answers getting me there. The code simply looks at the trigger button which in my case has a class name of delete and then looks for a <div> with the class name popover to see if it is visible or not.
if ($(".delete").next('div.popover:visible').length){
//do something
}

Button not executing window.location

Im actually having a problem with html5 button in visualforce pages. I have a requirement where when i click on a button, it should redirect to a certain page (user do not want link). For some reason which i don't know, the function i'm executing do not work with HTML5 button (in fact the page only refresh but do not redirect) but when i use input of type button, the function is executed as expected.
I want to use the html5 button as there are some specific css already defined for button in the plugin im using. Find below codes for my button and javascript function :
<button class="butt" onclick="newContact()" >Nouveau</button>
<script type="text/javascript">
function newContact(){
window.location = "/apex/VFP01_NewContact";
}
</script>
What did I do wrong here, and what is the limitation of html5 button ?
Got to know the answer. In visualforce page, the html5 button execute a submit of my form. A way to prevent this, was to specify the attribute type="button".
You really have two options.
You could consider wrapping a element with an anchor tag that points to the URL that you want to target as seen below :
<!-- Target the "YourAction" action in your "YourController" controller -->
<a href='#Url.Action("YourAction","YourController")'>
<input type="Button" id="mybutton" name="url button" value="Next" />
</a>
or you could handle this purely through Javascript and perform your navigation that way :
<!-- The onclick event will trigger a Javascript call to navigate -->
<input type="Button" id="mybutton" name="url button" value="Next" onclick="window.location.href='#Url.Action("YourAction","YourController")';" />

How to call another function on clicking of Modal button?

I want to use bootstrap modal in my page. At the same time, when modal trigger button is clicked, I want to do something in javascript also. It's not working.
<button type="button" class="btn btn-primary center-block" id="start_quiz" data-toggle="modal" data-target="#myModal">
Start Quiz
</button>
The button on clicking lauches modal but unable to call:
$('#start_quiz').click(function(){
alert("hello from javascript");
});
How can I achieve both results at the same time? Please help me.
Remove the data-toggle="modal" data-target="#myModal" attributes from the button, so that it doesn't open the modal.
Then check that the "hello from javascript" displays - it should do.
Then open the modal from javascript code instead, add this line below your alert:
$('#myModal').modal('show')
This should now make the alert, then show the modal. You can always reverse the two if you want the modal shown first.
Second option, hook into the shown method and write your javascript there:
$('#myModal').on('shown.bs.modal', function () {
// alert here
})

window.close() not working on pop up with pop up

I have a Customer Info form that has anchor tag "close" that should close the current window. This customer form is being opened as pop up. The Customer form also has a search btn that when clicked it pop ups the search form that is being run by a javascript called searchOrder.js. So basically it is a pop up inside a pop up. The customer form's close btn is not working but when the reference to searchOrder.js is removed, it begins to work. Also, when the search pop up is open and I click the "close" anchor tag, it closes the search pop up but never the current window which is the customer form.
Ive tried a lot of solutions already but nothing is working. I used self.close(), window.opener.close(), made it a btn instead of a link etc.,c alled a function onclick
function closeWindow() {
var closeRef;
window.opener='x';
closeRef = window.open('','_parent','');
//or closeRef = window.open("",name);
closeRef.close();
}
heres my gsp code:
<g:form method="post" name="CustomerInfoForm" target="_parent" role="form">
<div class="id="closeLink">Close</div>
<button id="searchOrderButton" type="button" class="button" onclick="searchOrder(document.forms[0].summaryMessage.value,'summaryMessageText','${createLink(action:'searchOrder')}','${createLinkTo(dir:'images',file:'closeButton.gif')}')" value="Search Order">Check Order</button>
</g:form>
How do I make the current window (customer info ) close? tnx
You should use a function like this to close your popup window :
<g:form method="post" name="CustomerInfoForm" target="_parent" role="form">
<div class="id="closeLink">
Close
</div>
<button id="searchOrderButton" type="button" class="button" onclick="searchOrder(document.forms[0].summaryMessage.value,'summaryMessageText','${createLink(action:'searchOrder')}','${createLinkTo(dir:'images',file:'closeButton.gif')}')" value="Search Order">Check Order</button>
</g:form>
<script type="text/javascript">
function openpopup()
{
my_window = window.open("","myPopup","status=1,width=100,height=100");
}
function closepopup()
{
if(false == my_window.closed)
{
my_window.close ();
}
}
</script>
EDIT : Don't forget to open your popup with the openpopup() function :
Open Popup Window
You can shorten window.close() to just close() and shorten window.open() to open(). Maybe you'll find what you need here, though:
http://www.w3schools.com/js/tryit.asp?filename=try_win_closed
http://www.w3schools.com/jsref/obj_window.asp

Close a bookmarklet after submitting form

This is related to question "Bookmarklet behind elements".
I want to either self close the iframe after form submission or if not possible, add a close button with the iframe to close it. my bookmarklet at the moment is
javascript:(function(){var iFrame=document.createElement('IFRAME');iFrame.src='http://www.yeongbing.com/testform/dd-formmailer/dd-formmailer.php';iFrame.style.cssText='display:block;position:absolute;top:5%;left:60%;width:40%;height:51%;overflow:hidden;';document.body.insertBefore(iFrame,document.body.firstChild);})();
I have tried the methods mentioned here but can't seem to work. Any suggestions?
Here's how you can close the iframe from your "Close Window" button.
First, give your iframe an id by adding "iFrame.id='foo';" to the end of your bookmarklet script:
javascript:(function(){var iFrame=document.createElement('IFRAME');iFrame.src='test2.html';iFrame.style.cssText='display:block;position:absolute;top:5%;left:60%;width:40%;height:51%;overflow:hidden;';document.body.insertBefore(iFrame,document.body.firstChild);iFrame.id='foo';})();
Then, in your iframe's source, change
<input type="button" onclick=window.close() value="Close Window"/>
to
<input type="button" onclick="parent.document.body.removeChild(parent.document.getElementById('foo'));" value="Close Window"/>

Categories

Resources