我正在尝试单击一个链接&将该文本放入具有原始样式(而非对话框样式)的jquery对话框中
我使用jquery通过鼠标进行元素选择(就像Firebug一样),然后单击元素后,我想将其添加到jquery对话框中的div
中。除了样式之外,一切都很好——我希望单击的元素在对话框中的样式与在第三方页面上的样式相同。
我在这里使用了www.wsj.com作为示例,但它可以是任何网站——当它打开时,单击右侧的SUBSCRIBE或LOGIN链接(它们是橙色的,直到你悬停,在这一点上它们变成白色)。
因此,如果我点击SUBSCRIBE,我只想在对话框中有一个与www.wsj.com上相同字体大小和家族的橙色链接。
注意:
- 如果无法获得原始的非悬停颜色(橙色),我会选择悬停颜色(白色)。我只是不想要对话框样式指定的颜色(不管它是什么——在本例中显示为蓝色)
- 我需要对话框CSS为"helloworld"div设置样式,就像目前一样
我怀疑dialogClass
周围的某些东西可能会起作用,但我无法做到这一点。
感谢所有能在这里帮助我的人!
<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>
在对话框中维护链接颜色等的最简单方法是在当前的a {}
css中添加另一个css。
#1:a, body .ui-widget-content a { /* whatever you want for both of them */ }
主体添加到trump css规范中,即jQuery UI添加的css。
示例#1
#2:#keepOriginal a { color:#5279a4; }
#keepOriginal是围绕它的一些Div(甚至是围绕你所有页面的Div包装器。)
示例#2