neiljohnston

import type { ComponentType } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"
import { randomColor } from "https://framer.com/m/framer/utils.js@^0.9.0"
import { useRef, useEffect } from "react"
// Learn more: https://www.framer.com/docs/guides/overrides/

const useStore = createStore({
    background: "#0099FF",
})

neiljohnston

import { addPropertyControls, ControlType } from "framer"
import { motion } from "framer-motion"

// Learn more: https://www.framer.com/docs/guides/code-components/
async function importStylesheets(id, css) {
    let styleElement = document.createElement("style")
    styleElement.id = "customStyleSheet"
    styleElement.innerHTML = String.raw`${css}`
    document.head.appendChild(styleElement)
    console.log(styleElement)

neiljohnston

import * as React from "react"
import { Frame, addPropertyControls, ControlType } from "framer"
import { motion } from "framer-motion"

async function importScripts() {
    let script = document.createElement("script")
    script.id = "font-awesome-fonts-script"
    // create a fontawesome kit: https://fontawesome.com/start
    script.src = "https://kit.fontawesome.com/KIT_ID_HERE.js" 
    script.crossOrigin = "anonymous"

neiljohnston

import * as React from "react"
import { Frame, addPropertyControls, ControlType } from "framer"
import { url } from "framer/resource"

async function importScripts() {
    let script = document.createElement("script")
    script.id = "font-awesome-fonts-script"
    // script.src = "https://kit.fontawesome.com/1fa5cfd703.js". // old kit - webfonts, not svg
    script.src = "https://kit.fontawesome.com/ee1b620a34.js" // unified kit - svg
    script.crossOrigin = "anonymous"

neiljohnston

As of Bootstrap 3.1.1 modal behaviour has changed.  When you load remote content into the modal, the revised behaviour sees the content loaded into the modal's root.  This destroys the modal's internal layout, meaning that the remote content will need to be modified to mimic the layout.  For many user's that will be impractical.

To reinstate the old behaviour we're going to hijack Bootstrap 3.1.1's modal behaviour a hair.  This will be done using Bootstrap 3's documented modal mark up, so the behaviour should be seemless.

I'm going to keep the code variable heavy and descriptive so those new to Javascript can follow along.  One of the bonuses of Bootstrap is that it democratizes mobile first and responsive development to new coders.  I'm also assuming the presence of JQuery.  Javascript heavy lifter types will handily streamline the code.

For reference here's a link that invokes a BS3 modal:
<li><a data-toggle="modal" href="terms.html" data-target="#terms">Terms of Use</a></li>

In youre Javascript you're