Solve the problem that JQuery boxy plug-in does not display corner images in IE, jqueryboxy

Solve the problem that JQuery boxy plug-in does not display corner images in IE, jqueryboxy

The JQuery boxy plug-in is easy to use, but some problems may occur. For example, the corner of the pop-up box cannot be displayed in IE. This blog will solve this problem in the future. A boxy.css file and jquery. boxy. js file will be available after the boxyplug-in is introduced to the project. In the boxy.css file, set the style of the four angle images in the pop-up box, for example:

No modification is required in the Chrome browser, as shown below:

I checked some information on the Internet and said that adding the image path in the css file to the full path can solve the problem as follows:

It is found that this modification does not work, and the effect after running is still as follows:

Effective Solution

Comment out the lower part of the css above, for example:

Then add a script to the boxy function in the jquery. Boxy. js file. The modified Boxy function code is shown below:

Function Boxy (element, options) {this. boxy = jQuery (Boxy. WRAPPER); jQuery. data (this. boxy [0], 'boxy', this); this. visible = false; this. options = jQuery. extend ({}, Boxy. DEFAULTS, options | {}); if (this. options. modal) {this. options = jQuery. extend (this. options, {center: true, draggable: false});} // options. actuator = DOM element that opened this boxy // association will be automatically delete D when this boxy is remove () d if (this. options. actuator) {jQuery. data (this. options. actuator, 'active. boxy', this);} this. setContent (element | "<div> </div>"); this. _ setupTitleBar (); this.boxy.css ('display', 'None '). appendTo (document. body); this. toTop (); if (this. options. fixed) {if (jQuery. browser. msie & jQuery. browser. version <7) {this. options. fixed = false; // IE6 doesn't support fixed posi Tioning} else {this. boxy. addClass ('fixed') ;}} if (this. options. center & Boxy. _ u (this. options. x, this. options. y) {this. center ();} else {this. moveTo (Boxy. _ u (this. options. x )? This. options. x: Boxy. DEFAULT_X, Boxy. _ u (this. options. y )? This. options. y: Boxy. DEFAULT_Y);} // fengwei add 2010-11-28 // used to solve the problem of displaying the rounded corner of the pop-up box in ie. if ($. browser. msie) {var setFilter = function (cls) {var obj = $ (cls), ret = obj.css ("background-image "). match (/url \(\"(. +) \ "\)/); if (ret = null | ret. length <1) return; obj.css ({"background": "none", "filter": "alpha (opacity = 0)", "filter": "progid: DXImageTransform. microsoft. alphaImageLoader (src = '"+ ret [1] +"') "}) ;}; setFilter (". top-left "); setFilter (". top-right "); setFilter (". bottom-left "); setFilter (". bottom-right ");} if (this. options. show) this. show ();};

After modifying the css and js files, run the program again. In IE6, 7, and 8, the box with corner is displayed normally.

I hope this article will help you.