I have jquery plugin but on page load it works but when I integrate it with my php script it seems not to load.I have check paths but to no success. as soon as the page loads i want the window to show onload check out my code i put in the head tag please excuse the formatting:
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>SimpleModal Basic Modal Dialog</title>
<meta name='author' content='Eric Martin'
/>
<meta name='copyright' content='2012 - Eric Martin' />
<link type='text/css' href='../css/demo.css' rel='stylesheet' media='screen'
/>
<link type='text/css' href='../css/basic.css' rel='stylesheet' media='screen'
/>
<script>
window.onload = function () {
$(document).ready(function () {
$('#basic-modal-content').modal();
return false;
});
$('#modalContentTest').modal({
onShow: function (dialog) {
var sm = this;
dialog.container.animate({
height: 300,
width: 300
}, 500, function () {
sm.setPosition();
});
}
});
};
</script>
<style>
.noTitle .ui-dialog-titlebar {
display:none;
}
</style>
</head>
....between body tags i have the php script
I think your problem is in the combination of window.onload and jquery $(document).ready.
The "ready" method is triggered when the DOMContentLoaded event is triggered (jQuery simulates this on browsers that do not support it), while window.onload triggers when all additional content (css, images) is loaded - which happens afterwards.
So by the time you bind the "ready" event, the event has already been triggered and will not trigger again.
I suggest removing the window.onload wrapper function.
$('#modalContentTest').modal({
onShow: function (dialog) {
var sm = this;
dialog.container.animate({
height: 300,
width: 300
}, 500, function () {
sm.setPosition();
});
}
});
$(document).ready(function () {
$('#basic-modal-content').modal();
return false;
});
Here are some details on these two events
Another concern I have is that the id of the declared modal (#modalContentTest) is different from the one you are trying to trigger (#basic-modal-content)