Home/ Questions/Q 8458361
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T13:03:32+00:00

I’m trying to click a link & put that text into a jquery dialog

  • 0

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 http://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 http://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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0