Link to home
Start Free TrialLog in
Avatar of Jazzy 1012
Jazzy 1012

asked on

Fixing my modal from bootstrap

I have this code:

<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>

Open in new window


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?
Avatar of Jazzy 1012
Jazzy 1012

ASKER

Ok so I did the cursor part, I just have the alignment issue
Avatar of Julian Hansen
Cursor is just the following

.target:hover {
   cursor: pointer
}

how could I make them line up next to each other
How do you make what line up?
I want them to be
How it works                 Site

now it is

How it works
Site
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
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;
}

Open in new window

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
User generated image
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 left
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.

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 left
Width of what - the page or the modal?
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 Site
But 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>

Open in new window

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 -
I just want it to redirect, its fine I understand now, But now my css wont change
But now my css wont change
In what way - can you post the code you have so far.
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;
}

Open in new window

Maybe open a new question for this.
Hey can you take a look at my other question?
Sure, post the link.