3

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.

user
  • 6,567
  • 18
  • 58
  • 85
  • 1
    Shadow DOM doesn't work well (Or [at all on Firefox](https://caniuse.com/#feat=shadowdomv1)) and this is tagged *greasemonkey* (implies Firefox). For universal userscripts, your only choice is iframes. – Brock Adams Oct 14 '17 at 21:59

1 Answers1

0

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?

svujic
  • 114
  • 6