MyBB Community Forums

Hello community!

I was asked to help my friend on his forum.
I've installed this imgur plugin on our MyBB 1.8.19. It's working perfectrly fine on the default theme, but it does not on MyBB GoMobile. I've edited templates to add the plugin in GoMobile, but the popup is not working as expected. It does not appear as a popup, but it lands at the end of the page.


<-- replaced bunch of base 64 code segments with uploaded images -->

Default theme :


GoMobile Theme :


I've added modal code to global.css and I've changed priority of loading to 1 for global.css, but it still does not work as a popup. 
Modal code:

/** Modal Start **/

.blocker {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	z-index: 9999;
	padding: 20px;
	box-sizing: border-box;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.75);
	text-align: center;
}

.blocker:before{
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -0.05em;
}

.blocker.behind {
	background-color: transparent;
}

.modal {
	width: 400px;
	text-align: left;
	background: #fff;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	z-index: 2;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0 0 10px #000;
	-moz-box-shadow: 0 0 10px #000;
	-o-box-shadow: 0 0 10px #000;
	-ms-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
}

.modal a.close-modal {
	position: absolute;
	top: -12.5px;
	right: -12.5px;
	display: block;
	width: 30px;
	height: 30px;
	text-indent: -9999px;
	background: url(images/close.png) no-repeat 0 0;
}

.modal-spinner {
	display: none;
	width: 64px;
	height: 64px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-right: -32px;
	margin-top: -32px;
	background: url(images/spinner_big.gif) no-repeat center center;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
}

/** Modal End **/

Here's the popup code:

<div class="modal" style="width:200px">
    <div style="overflow-y: auto; max-height: 200px; background-color:rgb(43,43,43);padding:10px;text-align:center;" class="modal_{$pid}">
        <img src="{$mybb->settings['bburl']}/images/imgur.png" /><br />
        <button onclick="$('#selector').click()">{$lang->imgur_select}</button>
        <input id="selector" style="visibility:hidden;position:absolute;top:0;" type="file" onchange="pupload(this.files)" accept="image/*" multiple="multiple">
        <p id="uploading" style="display:none;"><img src="{$mybb->settings['bburl']}/images/loader.gif" border="0" /></p>
    </div>
    <script type="text/javascript">
	function pupload(files) {
            upload(files);
            $.modal.close();
	}
    </script>
</div>

Any idea how can I debug this? Many thanks in advance for your help!

BR,
Szymon