Let's move on with our plugin and create a pop-up window for our message. To do this, we will include CSS code and make a couple of changes to the plugin.
In this example, we are going to style our pop up using the CSS. The contents of the CSS will be located in the external file for easy editing. We will use another WordPress action to load this stylesheet from the<head> tag of the document.
Create a new file named
wp-live-blogroll.css.Add this code to style the
lb_popupelement:#lb_popup { color:#3366FF; width:250px; border:2px solid #0088CC; background:#fdfdfd; padding:4px 4px; display:none; position:absolute; }Edit our JavaScript
wp-live-blogroll.jsto position the pop up at mouse coordinates:// create a new div and display a tip inside $(this).append('<div id="lb_popup">' + this.tip + '</div>'); // get coordinates var mouseX = e.pageX || (e.clientX ? e.clientX + document.body.scrollLeft: 0); var...