Calling jQuery (modal popup) function from within another JavaScript function
Question
I'm trying to call a facebox modal box (flow player's jQuery Tools).
I have a select menu that onChange is calling my sub_debt script. The sub_debt script evaluates the value of the select menu - if the value == 1 (for 'yes'), I would like to call the facebox modal defined in the header.
Currently, the below code is invoking the facebox modal "somewhat" - it is taking the select menu "out" of its place on the page as if it is the only part of the facebox-modal popup itself and applying the darkened background mask to the rest of the page.
(note: the facebox modal script does work properly when called from an anchor tag for example)
<head>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<!-- Popups : Facebox -->
<script>
function popup(choosebox) {
var $choosebox = $("#" + choosebox);
if ($choosebox.hasClass("init")) {
$choosebox.overlay().load();
}
else {
$choosebox.addClass("init");
$choosebox.overlay({
// custom top position
top: 260,
mask: { color: '#838383',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: true,
load: true
});
}
}
</script>
</head>
<body>
<script type="text/javascript">
function subdebt(choosebox){
var myField = document.getElementById('subordinate_debt');
if(myField.value == "1") {
popup(choosebox); // Calls above function from defined in header
} else {
alert("Do not fire popup - you entered: " + myField.value);
}
}
</script>
<select name="subordinate_debt" id="subordinate_debt" onchange='subdebt("subordinate_debt");'>
<option value="" selected="selected"></option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
2 answers
solution1
0 2012-05-13 11:10:21
It's because you do set the id of the select to be the facebox's content. You'd want to pass another div's / element's id to be the facebox's content.
eg:
...
<div id="SHOWME" style="display: none;">
Inside facebox
</div>
<select name="subordinate_debt" id="subordinate_debt" onchange='subdebt("SHOWME");'>
...
solution2
0 ACCPTED 2012-05-14 14:01:28
The following changes worked. (Thanks "Amit Soni" - oDesk.com contractor)
<script type="text/javascript">
function subdebt(choosebox){
var myField = document.getElementById('subordinate_debt');
if(myField.value == "1") {
popup("subordinate_debt_Popup");
} else {
alert("Do not fire popup - you entered: " + myField.value);
}
}
</script>
And changed the "subordinate_debt" DIV ID to "subordinate_debt_Popup"
<div id="subordinate_debt_Popup" class="facebox">.....</div>
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.