CODEWITHSUNDEEP
jqueryhtmlcss
fry01
fry01

Reputation: 29

How to close a pop up window just by clicking it?

I created a pop up window that opens a bigger copy of the image that is clicked on. This is the html code for it:

<img src="images/car1_1.jpg" alt="interior" id=Upics onClick="MM_openBrWindow('images/car1_1.jpg','CARPOP','width=500em,height=500em')" />

The jquery/script for the pop up:

<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>

Is there a way that the window is closed when it is clicked on?

Upvotes: 0

Views: 1965

Answers (5)

Adrien Brunelat
Adrien Brunelat

Reputation: 4642

Javascript's window.close() closes the window the script is attached to. In your case, if you add this js code to your popup's script, you can close its window from a click event, like this:

main.html

<img src="images/car1_1.jpg" alt="interior" id=Upics onClick="MM_openBrWindow('popup.html','CARPOP','width=500em,height=500em')"/>

popup.html

<html>
<head>
<title>Click me</title>
</head>

<body onClick="closePopup()">
  <img src="images/car1_1.jpg" alt="interior"/>
</body>
</html>

<script type="text/javascript">
function closePopup() {
  window.close();
}
</script>

Tweak the CSS if the image isn't covering the whole page.

Upvotes: 1

Mr. Roshan
Mr. Roshan

Reputation: 1805

Solution 1: Use the windoe.close() Method

  popup_window = window.open("");

  popup_window.close ();

Solution 2: You can close the current window using self.close ();

Upvotes: 0

Prasanna
Prasanna

Reputation: 41

First I stored the popup reference in a variable called imgPopup. Wrote a click event on body to close the popup imgPopup.close(). I am checking if the reference exists before calling close() function. If you click anywhere on the current window, the popup will be closed

<script type="text/javascript">
var imgPopup;
function MM_openBrWindow(theURL,winName,features) { //v2.0
  imgPopup = window.open(theURL,winName,features);
}
jQuery(document).ready(function() {
// Close the window when we click on the body.
    jQuery('body').click(function() { 
        if (imgPopup) {
            imgPopup.close(); 
        } 
    });
});
</script>

Upvotes: 0

Amar Lingeswararao
Amar Lingeswararao

Reputation: 26

var myWindow;
var count = 0;
function MM_openBrWindow(theURL,winName,features) {
    myWindow =   window.open(theURL,winName,features);
}

$("body").on("click",function(){
    var url  =  $("body").find('img').attr('src') || "";
    if(url != "" && count == 0){
        count = 1;
    }else{
        count = 0;
        myWindow.close();
    }

})

if you click any where except on the image, the modal window is closed

Upvotes: 0

Zlatan Omerovic
Zlatan Omerovic

Reputation: 4097

First, you need to make a variable/reference to your popup, like this for instance:

<script type="text/javascript">
<!--
var myPopup;

function MM_openBrWindow(theURL,winName,features) { //v2.0
  myPopup = window.open(theURL,winName,features);
}
//-->
</script>

Then elsewhere you can do a call:

myPopup.close();

Upvotes: 0

Related Questions