How do I style the contents of a JQuery dialog box?

问题

I'm trying to click a link & put that text into a jquery dialog WITH its original styling (not the dialog's style)?

I'm using jquery to do an element selection by mouse (like Firebug), then once I click on the element I want to add it into a div inside a jquery dialog box. Everything works fine except the styling - I want the clicked element's style to be the same INSIDE the dialog box as it is on the third party page.

I've used www.wsj.com as the example here, but it could be any site - when it opens click on the SUBSCRIBE or LOGIN links on the right (they are orange until you hover, at which point they go white).

So - if I click on SUBSCRIBE - all I want is to have an ORANGE link in the dialog box of the same font-size and family as it is on www.wsj.com.

Notes:

If it's not possible to get the original non-hover color (orange) I'd settle for the hover color (white). I just don't want the color dictated by the dialog box styling (whatever it is - shown in this example as blue).
I need the 'hello world' div to be styled by the dialog box CSS, as it currently is

I suspect something around dialogClass might do it but I can't get that to work.

Thanks to anyone who can help me here!

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<style>
    .ui-widget-header { border: 1px solid green; background: #1f84f5 url(images/ui-bg_highlight-hard_75_1f84f5_1x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; font-size: 20pt; }
    .ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222;  font-size: 20pt;}
</style>
<script>
    var $j = jQuery.noConflict();
    var horiz = ($j(window).width() / 2) - (750 / 2);
    $j(document).ready(function() {
        // MOUSE ENTER  
        $j("div,a").mouseenter(function (e) {
            $j(this).css("outline","3px solid green");
            var target = event.target || event.srcElement;
            stuff = target.outerHTML;
        });
        // MOUSE OUT    
        $j("div,a").mouseout(function (e) {
            $j(this).css("outline","0px solid");
        });
        // CLICK    
        $j("div,a").click(function (e) {
            e.stopPropagation();
            e.preventDefault();
            var thisCOL = $j(this).css("color"); 
            alert('to check : thisCOL='+thisCOL);
            document.getElementById('contents').innerHTML = stuff;
            $j( "#thedialog" ).dialog({
                title: "Dialog",
                height:'auto', 
                minHeight:300, 
                width:780,
                position: [horiz,50],
                modal: true,
                buttons: {
                    "Cancel": function() {$j(this).dialog( "close" ); },
                    "Save": function() {$j('#myform').submit(); }
                }
            });
        });
    });
</script>
    </head>
    <body>
<?php 
    $url = 'http://www.wsj.com';
    $data = file_get_contents($url);
    $data = '<head><base href='.$url.'/></head>'.$data;
    echo $data;
?>
<div id="thedialog" title="Simple dialog box" style="display:none">
    <div id="something">Hello world</div>  <!-- I need this to stay black, not inherit the wsj.com color -->
    <div id="contents">I want this text to be styled</div>  <!-- to be the right color from wsj.com -->
</div>
<!-- FORM submission code from dialog SAVE button left out for clarity  -->
    </body>

回答1:

Easiest way to maintain the link colors etc inside of the dialogs is to just put another css addition to your current a {} css.

#1:a, body .ui-widget-content a { /* whatever you want for both of them */ } body added to trump css specification-wise the css added by jQuery UI.

example #1

#2: #keepOriginal a { color:#5279a4; } #keepOriginal being some Div around it (or even a div wrapper around all your pages.)

example #2

来源：https://stackoverflow.com/questions/12202448/how-do-i-style-the-contents-of-a-jquery-dialog-box

标签

jquery

dialog

styles

jquery-ui-dialog