Jazzy 1012
asked on
Fixing my modal from bootstrap
I have this code:
I want whenever I hoover over How it works, for the cursor to be a pointer, its not working and also how could I make them line up next to each other? Before I added the popup it worked, not it doesnt I tried adding div row but it still didnt work, any ideas?
<footer>
<center>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<H2>Battery Low!</H2>
<h4>Your Laptop battery is less then 10%.Recharge the battery.</h4>
</div>
</div>
</div>
</div>
<div class= "row">
<div data-toggle="modal" data-target=".bs-example-modal-lg" style= "padding-right:30px;color: #FFFFF2;font-size:25px;font-family: Tahoma;">How it works
</div>
<a href="../temp1" style= "padding-right:30px;color: #FFFFF2;margin-top:100px;font-size:25px;font-family: Tahoma;"> Site </a>
</div>
</center>
</footer>
I want whenever I hoover over How it works, for the cursor to be a pointer, its not working and also how could I make them line up next to each other? Before I added the popup it worked, not it doesnt I tried adding div row but it still didnt work, any ideas?
Cursor is just the following
.target:hover {
cursor: pointer
}
.target:hover {
cursor: pointer
}
how could I make them line up next to each otherHow do you make what line up?
ASKER
I want them to be
How it works Site
now it is
How it works
Site
How it works Site
now it is
How it works
Site
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Yes but as you can see in your sample as well, when I put it in the div, the popup shows a little then fades. For mine the popup shows a little then it redirects to the other page.
ASKER
here is my css:
.modal {
/* display: block;*/
padding-right: 0px;
background-color: rgba(4, 4, 4, 0.8);
color:white;
}
.modal-dialog {
top: 20%;
width: 100%;
position: absolute;
}
.modal-content {
border-radius: 0px;
border: none;
top: 40%;
}
.modal-body {
background-color: #48B0D3;
color: white !important;
}
Do you want the Site link to open the popup? Because as you have it - your href is pointing to another path so it is going to navigate the browser away from the page.
CSS added to the sample
CSS added to the sample
ASKER
ASKER
I did the width by also changing position relative
what is the screen shot representing - the page or the popup - can you do examples with the same content in your code so we know what it is referring to.
Lets do one thing at a time.
Lets do one thing at a time.
Yes but as you can see in your sample as well, when I put it in the div, the popup shows a little then fades. For mine the popup shows a little then it redirects to the other page.Not sure what you mean - popup stays on the screen for me
And no Site is going to redirect to another page I also want the width 80% but center it didnt work with me it floats to the leftWidth of what - the page or the modal?
ASKER
Ok forget the second part, now go to the sample you showed me and Click on Site, theres a 5 second fade (which is how the modal comes up), then it redirects to the other page, that is what I mean. And second it that how can I change the background and font color for me it isnt work. It stays like the image i Attached earlier
now go to the sample you showed me and Click on SiteBut that is what I was referring to in my earlier post - look at how site is defined
<a href="../temp1" style= "padding-right:30px;color: #FFFFF2;margin-top:100px;font-size:25px;font-family: Tahoma;"> Site </a>
You have an href in there - so naturally it is going to navigate away.You responded
And no Site is going to redirect to another page
Either Site is opening the popup or it points to another page - you can't have both.
Please describe in detail the functionality you are trying to achieve -
ASKER
I just want it to redirect, its fine I understand now, But now my css wont change
But now my css wont changeIn what way - can you post the code you have so far.
ASKER
I took the code you gave me and I added the width and position
.modal {
/* display: block;*/
padding-right: 0px;
background-color: rgba(4, 4, 4, 0.8);
color:white;
}
.modal-dialog {
top: 20%;
width: 80%;
position: relative;
}
.modal-content {
border-radius: 0px;
border: none;
top: 40%;
}
.modal-body {
background-color: #00FFFF;
color: white !important;
}
Maybe open a new question for this.
ASKER
Hey can you take a look at my other question?
Sure, post the link.
ASKER