Bootstrap Modal doesnt work well - javascript

I'm trying to open a form with bootstrap modal, my first problem was that bootstrap modal disappear immediately after click on my button but searching in other questions I found the solution deleting from my template:
{!!Html::script('js/plugins/bootstrap.min.js')!!}
Now I have other problem, the form of modal open but I can not do nothing, I can not submit my form, I attached a file with photo.
It's all dark and I can not do nothing.
How can I fix this problem?
Is a problem if I deleted bootstrap.min.js ?(I'm afraid that after something goes wrong)
There other way to create modal form? (maybe javascript)
Thank you for your help!

Your modal is may be inside some other div , that is affecting it . Try putting it outside that div it will work !! Or try putting this in your css file it may work div.modal div.modal-backdrop {
z-index: 0;
}

Related

Bootstrap Modal freeze Page while being used as a UL Listitem

so basically im using the code from the Bootstrap Modal example # w3cschools.
Im trying to place it inside an unordered list. What im trying to archieve is that you click on the list item "imprint" to open up a modal showing the full imprint of my homepage. What happens is, that the whole page gets tinted and i cant click anything.
When i place the modal code somewhere else it works perfectly fine. Thanks for your time and help!
Cheers #Jekkt
Alright thanks everyone for reading. I got the solution.
.navbar-default {z-index: 9999;} is doing the trick
Cheers #Jekkt

Bootstrap Modal closing when any modal inside is closed

I am using basic bootstrap modal inside which there is a summernote text area. Problem is when I click on the insert picture button in summernote, it again opens a modal to choose the picture, but if I click on the modal close button of the summernote picture modal without choosing the picture, it closes the main modal too.
I don't want to close the main modal when modal close of the picture modal is clicked. Any help would be appreciated....
Check that these modals do not share the same id attribute
Also check that they do not share the same name attribute
you can give them separate names manually (like numbers: modal1)
you can also name them automatically with your server-side language when creating them, or with JavaScript upon load, but remember to reference these names correctly in the references, buttons & functions that close them.
#argon 's solution didn't work for me.
But I found this solution (provided here):
('#HtmlContent').summernote( {
dialogsInBody: true,
});

How to prevent js scroll to top on click

I'm having trouble with what I believe to be a javascript or jQuery issue.
I have build a css checkbox label that when clicked reveals a form on the page.
The problem I'm having is that when the label is clicked, if the user has scrolled down before clicking, the page scrolls to top.
I believe this is a JS issue, maybe coming from the theme I am using, but my JS skills are close to none so I would really appreciate any help.
You can view the page here:
http://urlgone.com/5504c5/
and the "Scroll to top" happens when clicking on the "sign up" blue text.
I've tried adding this JS code as suggested in another post, but that didn't solve the issue.
$("#slidingFormBtnId").click(function(e) {
e.preventDefault();
// Do your stuff
});
I think your issue in that you are attempting to use jquery incorrectly inside Wordpress. Your console states $ is not a function.
You can view this page for some help: https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/ but basically you should wrap your jquery in:
jQuery(document).ready(function( $ ) {
// code here
}

Adding DIV's inside modal dialog HTML5

I tried to google but didnt find exactly I am looking for.
I need a sample example code or a resource link to create a modal dialog box and I want to have two boxes(div's) inside the dialog box.
I have to insert different content inside both the boxes(inside the dialog box) when the user clicks.
I know how to create a dialog box but, I would like to particularly know how to insert divs inside it.
I hope my question is clear. Please help.
If you just want to look at the code have a look at the work section of http://www.pixelvalet.com (ok! its my website but then it would help you right?).
The way i approached the issue is:
first i added the template (all the empty divs i needed which i would be populating later on) in the main html file itself
next i gave it a hidden css style to the parent which contained all the divs.
then i added a logic which would tell the browser the which link was clicked and then it would populate the divs in the template appropriately using ajax
it would then slowly fade in using jQuery
but then this isnt the only way you might do this. There are tons of plugins out there which help you create a modal box. but i opted for this route because i wanted it completely customised.
hope it helps.
I have used bootstrap modal for dialog box it works great you check it here:
http://getbootstrap.com/javascript/#modals
The basic idea is just put your dialog box code at bottom of you page,
<div id="my_dialog">
content
</div>
And you detach it in your jquery or other framework you are using or just pure js.
In jquery you can do this:
var my_dialog = $( "#my_dialog" ).detach();
now when ever you need to show it you just attach it to where you want to show it.
and before you attach it you can insert any content you want.
But I would suggest you to use bootstrap's modal much easier.

Twitter Bootstrap popover display in wrong place

I have button that when I click on it I get "pop up window" (use boostrap modal) with data. I used twitter boostrap tooltip and everything works fine. when I decide replace the tooltip by popover I get some strange problems. first of all I want popover show up when I hover a link but it appear only when I click on the link. secondary the popover appears on the main window and don't disappear no metter what I try. I just want him appear on the boostrap modal like my last tooltip.
this is my link:
link
js:
$('.blob').popover();
how can I fix it? what wrong?
You spelled trigger incorrectly, should be:
link
With that corrected it works fine in jsfiddle for me.
Not sure why the data-trigger attribute isn't working, but passing the option using the JS initialization parameter makes it behave as you intend:
$('.blob').popover({trigger: "hover"});
jsfiddle here:
http://jsfiddle.net/dcasadevall/S8sXQ/1/

Categories

Resources