-
Author
Tagged: modals
-
March 17, 2015 at 15:56 #50446
US
ParticipantCOPY 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">×</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?
March 19, 2015 at 09:40 #50793Laura
ModeratorHello, 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 solutionLaura 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 🙂
March 19, 2015 at 10:49 #50798US
Participant@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?
March 23, 2015 at 22:28 #51268Laura
ModeratorHello, 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 solutionLaura 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 🙂
March 26, 2015 at 14:21 #51624US
Participant@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
March 26, 2015 at 14:24 #51625US
Participantnew example: https://playingintrafficrecords.com of what the modal should do
March 26, 2015 at 16:41 #51644sharmstr
ModeratorWorks 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 solutionThis 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.March 27, 2015 at 02:09 #51765US
ParticipantNot 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 allAttachments:
You must be logged in to view attached files.March 27, 2015 at 03:08 #51775sharmstr
Moderatoradd 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 solutionThis support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
March 27, 2015 at 03:25 #51779US
ParticipantCOPY 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
March 27, 2015 at 03:32 #51780sharmstr
ModeratorYou’re welcome.
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionThis support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
March 27, 2015 at 03:35 #51781US
Participantregarding?:
Also when when you guys catch up to bootstrap 3.3.4 – you’re still on 3.0 and some markup is broken
March 27, 2015 at 04:12 #51785sharmstr
ModeratorI 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 solutionThis support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
-
AuthorPosts
The forum ‘General questions’ is closed to new topics and replies.