View Full Version : Bootstrap modal onclick issue

Jan 18th, 2019, 06:15 AM
In my HTML page has iframes, inside one of iframes has button.html,

Please see this page https://www.onlanka.com/mychat/js-modal/

You can see "yellow smile face" image (in bottom iframe), after you clicked on it, it'll open popup window.

Then you can click on any image, then text code of the image will pass into form text field located at button.html (same location as yellow faces image)

Then I added bootstrap modal popup, you can see it by clicking on "Open modal" blue button in same iframe area,

I used same javascript but it doesn't pass image text code into form field when clicked on the image.

This is the Javascript i used in index.html along with modal content:

<script language="javascript">
function pick(symbol) {
if(window.opener) window.opener.document.chatMsg.mesg.value += (window.opener.document.chatMsg.mesg.value == "") ? symbol : " " + symbol;

This is the Javascript + HTML code used in the image:

<a href="javascript:pick(':HI');" alt=":H1" title=":H1"><img class="img-responsive" src="../../chat/converts/smile1.gif"></a>

Above code working with old popup, but not with bootstrap modal.

Please suggest me a fix

Jan 18th, 2019, 01:47 PM
It's in an IFRAME, where exactly is it supposed to show it?

See how the older version uses scripting to refer to the IFRAME's parent window? Your local one in the iframe doesn't do so, so wherever it is trying to show the modal has to be within that tiny little iframe and not shown in the main window/page.

... and even the existing one is blocked in some browsers since IFRAMES for security reasons aren't supposed to even have access to the parent window, and if you deploy under the CSP (content security policy) such access should be blocked outright in ALL browsers. To that end neither technique you are attempting is even viable for real world deployment.

It is to that end that IFRAMEs are usually best left to embedding advertisements or off-site videos from places like Youtube, and NOT used for normal web development / on site development. They are universally broken inaccessible junk and all you're doing by using one here is making the site slower loading, harder to use, and harder to develop/maintain.

Though the same could be said of bootcrap and jQuery. Anyone telling you those make anything "better" or "simpler" is just flapping their arse-cheeks in the wind.

The kicker of all of this is that if you just coded this as a simple normal page, you wouldn't even need scripting for modals in any modern browser or IE9/later. Either the :target attribute or an input:checked with sibling selectors could be used to achieve this, no scripting needed.

Which is why the "fix" I'd suggest is kicking bootstrap, jquery, and IFRAME to the curb and coding the page with semantic markup, separation of presentation from content, leveraging selectors properly, and only diving for the JavaScript when it is actually needed and/or to enhance an already fully functioning page.

You want separate files to make individual pieces of the page easier to re-use and assemble, do it with a server-side language like PHP, PERL, node.js, etc, etc.