简体   繁体   中英

DHTML modal window, close on background click

I am using the dhtml window widget script found here:

http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/index.htm

I would like for the user to be able to close the dhtml popup window when clicking the background. Currently it only works when clicking the close button. How do I add that to this script?

This is NOT for "dhtmlmodal" as the subject says. This is for "dhtmlwindow". There IS a difference as "dhtmlmodal" does not even seem to have a .close() event, only a .hide()

That widget is quite old now (over 6 years) and there are no doubt numerous newer, better alternatives, but that's besides the point.

The documentation on the page you linked to details how to create the popup, and then how to access functions that act on the pop up. Copied below for reference:

Create links that manipulate an opened window in various ways when clicked on

<script type="text/javascript">
// this function invocation generates the popup with your specific parameters
// the variable name you assign (googlewin) is used to interact with the popup later
var googlewin=dhtmlwindow.open("googlebox", "iframe", "http://google.com", "Google Web site", "width=700px,height=450px,resize=1,scrolling=1,center=1", "recal")
</script>

<!-- this is an example link that will call the close method on the googlewin object
this is the bit you need to apply to whatever it is that you want the visitor to be able to click on to close the popup -->
<a href="#" onClick="googlewin.close(); return false">Close Window</a>

Bear in mind that the widget you are using creates a popup window, not a true modal. If you were to use a modal (lightbox) you would have built in close functionality whenever the visitor clicked anywhere outside of the main modal content area.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM