如何风格JQuery的对话框的内容是什么?(How do I style the contents

2019-09-22 00:06发布

我想点击一个链接和把文本到一个jQuery对话框,其原有的风格(而不是对话的风格)?

我使用jQuery做鼠标(如Firebug)元件选择,那么一旦我点击我想将其添加到一个元素上div jQuery的对话框内。 一切工作正常,除了造型 - 我想点击的元素的风格在里面对话框一样,因为它是在第三方网页上。

我用www.wsj.com作为例子在这里,但它可以是任何网站-当它打开点击订阅或右侧LOGIN链接(他们是橙色,直到你悬停,他们去白了这点)。

所以-如果我点击订阅-所有我想要的是在相同的字体,大小和家庭的对话框橙色链接,因为它是www.wsj.com。

笔记:

  • 如果这是不可能得到原来的非悬停颜色(橙色)我会满足于悬停颜色(白色)。 我只是不想被对话框造型所规定的颜色(不管它是什么 - 在这个例子中的蓝色部分)。
  • 我需要的“世界你好”股利由对话框CSS样式,因为它是目前

我怀疑周围的东西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>

Answer 1:

维持对话框内的链接的颜色等最简单的方法是只把另一个CSS除了当前的a {} CSS。

#1: a, body .ui-widget-content a { /* whatever you want for both of them */ }体加入到由jQuery UI的加入王牌CSS规范明智的CSS。

示例#1

#2: #keepOriginal a { color:#5279a4; } #keepOriginal a { color:#5279a4; } #keepOriginal是一些事业部围绕它(甚至是周围所有网页一个div包装。)

示例#2



文章来源: How do I style the contents of a JQuery dialog box?