从用户脚本添加与样式无关的jQuery UI对话框到DOM

Question

I'd like to create a movable, resizable dialog independent from the style of the visited page.

I've added the jQuery UI CSS: jQuery-UI is not working in my userscript without CSS, or with customization?

I've tried to create a dialog from a div, but the style gets modified by the page CSS.
The contents can be unreadable if the page has unexpected / weird CSS.

Answer 1

You need to define your custom CSS for dialog DIV you want to show. If page has really weird CSS you should override these rules with your own. You can go extreme and declare all of your custom CSS rules with '!mportant'. Than you will have something like local CSS reset on that level.

Below is minimal example. Look in header for few sites on which I tested this script. This works for me with Greasemonkey 3.11 and 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"
});

This answer builds heavily on jQuery-UI is not working in my userscript without CSS, or with customization?