Simple Modal markup is broken

[US]

COPY CODE

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

This should render fine… can we not use normal bootstrap markup to render basic bootstrap items?

[US]

here’s my example:
http://traffic.mg/modal-video/

[Laura]

Hello, the video modal shows fine, i dont see any kind of error, could you explain a bit more? Thanks 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[US]

@Laura really?! lol! It shows fine because its not Kleo. The ShoeStrap. The example is what I want to achieve

Can you provide me a working version of this in Kleo?

[Laura]

Hello, this can be done with Easy Modal Plugin https://wordpress.org/plugins/easy-modal/
Let me know if it helps 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[US]

@Laura… thank you for answering, however I certainly don’t want to load yet another javascript file/s and css/s via a plugin to further bloat the theme out even more. Bootstrap is already loaded in this theme….

The modals need fixing. @abe can you advise here. This really should be working and no offence meant but it feels like this issue is being swept under the rug. There’s other users not getting answers on this

[US]

new example: https://playingintrafficrecords.com of what the modal should do

[sharmstr]

Works for me. Just needed to adjust the css

COPY CODE

#myModal {
  top: 0 !important;
}

#myModal:focus {
  outline: none;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[US]

Not here. This should work out of the box, can I request to get this working for the next update? Adding css should be needed

I used raw html element from visual composer and place this snippet
`
<!– Button trigger modal –>
<button type=”button” class=”btn btn-primary btn-lg” data-toggle=”modal” data-target=”#myModal”>
Launch demo modal
</button>

<!– Modal –>
<div class=”modal fade” id=”myModal” tabindex=”-1″ role=”dialog” aria-labelledby=”myModalLabel” aria-hidden=”true”>
<div class=”modal-dialog”>
<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”><span aria-hidden=”true”>×</span></button>
<h4 class=”modal-title” id=”myModalLabel”>Modal title</h4>
</div>
<div class=”modal-body”>
…
</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-default” data-dismiss=”modal”>Close</button>
<button type=”button” class=”btn btn-primary”>Save changes</button>
</div>
</div>
</div>
</div>
`

# things wrong
1. Modals should always load in the horizontal center on the browser regardless of page template used.
2. Modals should load near the top of the page – not pushed down
3. If the page is short it should not be obscured by the footer
4. We should not have to added css manually to the theme just to make it render at all

Attachments:

You must be logged in to view attached files.

[US]

http://traffic.mg/modal broken

[sharmstr]

add position:fixed to #myModal

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[US]

@sharmstr

COPY CODE

*/
#myModal {
	top: 20px !important;
	position: fixed;
}

#myModal:focus {
	outline: none;
}

Is a huge help! it’s getting there, again this should be placed in the theme natively

Also when when you guys catch up to bootstrap 3.3.4 – you’re still on 3.0 and some markup is broken

[sharmstr]

You’re welcome.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[US]

@sharmstr

regarding?:

Also when when you guys catch up to bootstrap 3.3.4 – you’re still on 3.0 and some markup is broken

[sharmstr]

I dont know. I was just trying to help you get your modals working. I’m a kleo user like you that has moderator status because I’m amazing. 😀

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Author]

Posts