javascript - 从用户脚本将独立于样式的 jQuery UI 对话框添加到 DOM

Question

我想创建一个可移动、可调整大小的对话框，独立于所访问页面的样式。

我添加了 jQuery UI CSS:jQuery-UI is not working in my userscript without CSS, or with customization?

我尝试从 div 创建对话框，但样式被页面 CSS 修改。
如果页面有意外/奇怪的 CSS，内容可能无法读取。

Answer 1

您需要为要显示的对话框 DIV 定义自定义 CSS。如果页面有非常奇怪的 CSS，你应该用你自己的规则覆盖这些规则。您可以走极端，用“!mportant”声明所有自定义 CSS 规则。然后您将在该级别重置本地 CSS 之类的内容。

下面是一个最小的例子。在标题中查找我测试此脚本的几个站点。这适用于 Greasemonkey 3.11 和 Firefox 54.0.1

// ==UserScript==
// @name        so_test2
// @include     https://www.google.dk/*
// @include     https://www.daily.co.jp/*
// @include     http://www.ahram.org.eg/*
// @include     https://www.almesryoon.com/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
// @require     http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js
// @version     1
// @grant       none
// ==/UserScript==

// dialog DIV
$("body").append ('<div id="mydialog" style="display: none">'
+'<p>This is a jQuery Dialog.</p></div>');

$("head").append(
    '<link '
  + 'href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/le-frog/jquery-ui.min.css" '
  + 'rel="stylesheet" type="text/css">'
);
// custom CSS for dialog
$("head").append(
'<style type="text/css">'
+'#mydialog { '
+'margin: 0; padding: 0; border: 0;'
+'height:100%; max-height:100%;'
+'color:#f00 !important;'
+'font: normal 3em "Open Sans", sans-serif;'
+'font-size: 32px;'
+'vertical-align: baseline;'
+'line-height: 1; }'
+'#mydialog table { '
+'border-collapse: collapse;'
+'border-spacing: 0; }'
+'.ui-dialog-titlebar { font: italic 2em "Open Sans", sans-serif; }'
+'</style>'
);

// options for dialog, for help look in jQuery docs
var opt = {
    width:      500,
    minWidth:   400,
    minHeight:  200,
    modal: false,
    autoOpen: false,
    title:      "Draggable, sizeable dialog",
    zIndex:     1
};

$("#mydialog").dialog(opt).dialog("open");

// alternative way to position a dialog
$("#mydialog").parent().css({
    position:   "fixed",
    top:        "4.2em",
    left:       "4em",
    width:      "75ex"
});

这个答案很大程度上建立在 jQuery-UI is not working in my userscript without CSS, or with customization? 的基础上