JQuery simple dialog box
<link href="simpledialog.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="simpledialog.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.simpledialog').simpleDialog();
});
$(document).ready(function () {
$('.simpledialog').simpleDialog({
opacity: 0.3,
duration: 500,
title: 'Simple Dialog',
open: function (event) {
console.log('open!');
},
close: function (event, target) {
console.log('close!'开发者_如何转开发);
}
});
});
$strLink = "<a href='viewTicket.php?id={$row['id']}' class='simpledialog'>$strName</a>";
<a href="#" rel="dialog_content" class="simpledialog">show dialog!</a>
<!-- content -->
<div id="dialog_content" style="display:none;">
<h3>DEMO</h3>
<p>This is a demonstration of jQuery SimpleDialog.</p>
<a href="#" class="close">close</a>
</div>
echo "<td>" . $strLink . "</td>";
when I click on the link it is not triggering the jquery
Thanks for any help!
Its better just make some div with position:absolute and just show it then you need it.
function showDialog() { $('#box').fadeIn(250); $('#box').fadeTo(0.5); }
function hideDialog() { $('#box').fadeOut(250); }
You can call it so: Open
And CSS if you need it:
#box {
position: absolute;
top: 100;
left: 100;
width: 100px;
height: 100px;
display: none;
}
First, the obvious question: have you included jQuery? As a jQuery extension, simpleDialog depends on jQuery to work. Just by fixing this would make a dialog display onclick, althouth the dialog itself is broken, which brings us to...
Secondary, as you can see with the example, simpleDialog works with links. At this moment (v0.1.1) calling it twice on the same link twice seems to be a no-no. So make two links and make your functions call simpleDialog only once on each link.
Finally, in case you still have problem, since this is a client-side issue only client-side code matters here. Make sure your php is producing the correct html. And check that the css and js actually loads (in the correct location etc.). Below is a complete outputted html that works for me:
<!DOCTYPE html><html><head>
<link href="css/jquery.simpledialog.css" type="text/css" rel="stylesheet" />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'> </script>
<script src="js/jquery.simpledialog.js" ></script>
</head><body>
<script type="text/javascript">
$(document).ready(function () {
$('.simpledialog1').simpleDialog(); // Default usage
});
$(document).ready(function () { // Usage with more parameters
$('.simpledialog2').simpleDialog({
opacity: 0.7, // Modified parameter to make it different from default
duration: 1000,
title: 'Simple Dialog',
open: function (event) {
console.log('open!');
},
close: function (event, target) {
console.log('close!');
}
});
});
</script>
<a href="#" rel="dialog_content" class="simpledialog1">show default dialog!</a>
<a href="#" rel="dialog_content" class="simpledialog2">show slower dialog!</a>
<!-- content -->
<div id="dialog_content" style="display:none;">
<h3>DEMO</h3>
<p>This is a demonstration of jQuery SimpleDialog.</p>
<a href="#" class="close">close</a>
</div>
</body></html>
加载中,请稍侯......
精彩评论