Close a window by clicking anywhere on the jpg image on that page

Report · Dec 03, 2016

Hi

I have a 'popup' style page of restricted smaller size that opens nicely, what I need to figure out is how to have that page close when a user clicks on that page. The below onclick="self.close();" does not appear to work.

Code for the page:

<html>

<head >

<title>Things you should know</title>

body {

overflow: hidden;

background-color: #000000;

}

</style>

#maincontainer

{

top:0px;

padding-top:0;

margin:auto; position:relative;

width:700px;

height:650px;

}

</style>

</head>

<div style="text-align: center;">id="maincontainer">

<img src="images/thingstonote.jpg" width="700" height="625" alt=""/> onclick="self.close();">

</div>

</body>

</html>

any help would be appreciated?

cheers

Report · Dec 03, 2016

This is what I would use. Just copy the code and paste it into a new document to see the result.

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
  <title>Untitled Document</title>
  <link rel="stylesheet" href="bootstrap/3/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script>
  <script src="bootstrap/3/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
  <div class="container">
  <div class="row">
  <div class="col-xs-12">
  <h2>Heading</h2>
  <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch modal
  </button>
  </div>
  </div>
  </div>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
  <div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <h4 class="modal-title">Modal title</h4>
  </div>
  <div class="modal-body">
  <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
  </div>
  </div>
  </div>
</body>
</html>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Dec 03, 2016

Hi Ben

Thanks, but no joy.

So you (and others) get the idea, have a look at www.retromania.co.nz/tickets.html - down bottom left click on 'before you buy please read this' which will open the popup - all I want to happen is a click anywhere on that popup page closes the window. No buttons etc.

cheers

Report · Dec 03, 2016

This should help you Using the window.close method

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Dec 03, 2016

You may also want to read this Why Modal Windows Have Killed Popup Windows - UX Movement

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Dec 03, 2016

Thanks Ben all sorted now

Close a window by clicking anywhere on the jpg image on that page

1 Correct answer