/    Sign up×
Community /Pin to ProfileBookmark

CSS not loading in Chrome with Bootstrap Framework

I made a popup form using HTML, CSS and JavaScript but for some reason in chrome and firefox, it does not display properly. I’ve made the website with Bootstrap so I’m not sure if that is messing with it. It is supposed to be hidden until you press the chat button but it is showing in chrome. Any tips? here’s the site: http://eavnetwork.com/

HTML:

`<script src=”JavaScript/JS.js”></script>’

‘<button class=”open-button” onclick=”openForm()”>Chat</button>
<div class=”chat-popup” id=”myForm”>
<form action=”https://formspree.io/[email protected]
method=”POST” class=”chat-container”>
<h1 style=”color:white;”>Chat</h1>
<label for=”msg” style=”color:white;”><b>Message</b></label>
<textarea placeholder=”Type message..” name=”msg” required></textarea>
<button type=”submit” class=”btn”>Send</button>
<button type=”button” class=”btn cancel”
onclick=”closeForm()”>Close</button>
</form>
</div>`

CSS:
`/* Button used to open the chat form – fixed at the bottom of the page */
.open-button {
background-color: rgba(0, 0, 0, 0.4);
color: white;
border: .1vw solid white;
border-radius: .5vw;
padding: 1vh 3vw;
cursor: pointer;
opacity: 0.9;
position: fixed;
bottom: 5vh;
right: 2vw;
width: 10vw;
}

/* The popup chat – hidden by default */
.chat-popup {
display: none;
position: fixed;
bottom: 0;
right: 2vw;
border: .5vh solid #252525;
z-index: 9;
}

/* Add styles to the form container */
.chat-container {
max-width: 300px;
padding: 10px;
background-color: #252525;
}

/* Full-width textarea */
.chat-container textarea {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
resize: none;
min-height: 200px;
}

/* When the textarea gets focus, do something */
.chat-container textarea:focus {
background-color: #ddd;
outline: none;
}

/* Set a style for the submit/login button */
.chat-container .btn {
background-color: grey;
color: white;
border: .1vw solid white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}

/* Add a red background color to the cancel button */
.chat-container .cancel {
background-color: transparent;
color: white;
border: .1vw solid grey;
}

/* Add some hover effects to buttons */
.chat-container .btn:hover, .open-button:hover {
opacity: 1;
}
`

JavaScript:
`function openForm() {
document.getElementById(“myForm”).style.display = “block”;
}

function closeForm() {
document.getElementById(“myForm”).style.display = “none”;
}`

to post a comment
CSSHTMLJavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@tracknutJul 24.2020 — The popup works for me in both Chrome and Firefox. Maybe you have JS turned off in those browsers?
Copy linkTweet thisAlerts:
@nikkinemo95Aug 20.2020 — Replace the href value with a relative path.

If these are the paths in your project:

I:/Projects/Angular/learning/nav.html

I:/Projects/Scripts/bootstrap-3.3.6/dist/css/bootstrap.min.css

Then this is the href value you need in your link tag:

<link rel="stylesheet" href="../../Scripts/bootstrap-3.3.6/dist/css/bootstrap.min.css">

[https://mcdvoicesurvey.onl](https://mcdvoicesurvey.onl) [https://mybk-experience.onl](https://mybk-experience.onl)
×

Success!

Help @sdawnc spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...