Theoretically, modals have a three-part structure, formed by a header, a body and a footer section; though you can’t really trigger a modal without a handle, which can be a button or a link.<\/p>\n
You might find yourself asking: Can’t we go on without the handle?<\/em> The answer is actually a surprising yes, you can. But you won’t be able to trigger the modal, which by default stays hidden until triggered, so it’s pointless to write the code for it.<\/p>\n In the header section, usually we only place the title of the modal, and maybe even a close button. In the body section we place whatever we wanted to showcase, be it terms and conditions, log in forms, videos, or even a single question. The footer section is where we usually place the button which take the user to the main page, or save changes or anything we want the user to do next.<\/p>\n We will use:<\/strong><\/p>\n [ulp id=’57DHuNTHJ2qczaGz’]<\/p>\n Linking and scripting <\/strong><\/p>\n First of all,after creating an HTML file called Trigger on the document…<\/strong><\/p>\n Now we can go on with creating our modal. First we create the trigger button, which can be placed anywhere in the document’s body.The code will look like this:<\/p>\n You may have guessed by now that the class attribute just makes the trigger button look big and blue. You will see there that the button also has two other data attributes which are Where is my modal?<\/strong><\/p>\n Time to tell the browser that I’m building a modal right in the place where I’ll place the following code snippet:<\/p>\n So let’s explain what we’ve written there:<\/p>\n The class The new guys in town are Let’s structure it!<\/strong><\/p>\n Right after the You will find the code for the header looking like this:<\/p>\n While you already understand that the On to creating the body. After writing the code for the header, you write the code for the body, which should look something like this:<\/p>\n The only thing you need to do is create a Just as simple is the code for the footer, which in itself is just a And that’s it. You can now see your modal.<\/p>\n But…<\/p>\n If you wrote the code being really careful, or even copy-pasted it and your modal still won’t show, then you’re as unlucky as me (and many others). There are some cases that the modal just won’t show. This can be for two reasons.<\/p>\n The first is that If it still doesn’t work then the problem is with your version of Bootstrap: some versions’ Now your modal is up and running, and looking like this:<\/p>\n You are now able to create a modal with basic properties, but we’ll show you more: CUSTOMIZING. You can make your modal multifunctional and fancy. Here’s how:<\/p>\n Changing it’s size<\/strong> Removing animation<\/strong> Cool, huh?! Now on to even cooler stuff!<\/p>\n Embedding Youtube videos<\/strong><\/p>\n We mentioned earlier that you can use modals to showcase videos. If I want to embed a Youtube video, how<\/em> exactly do I do that? Here’s how:<\/p>\n As I’ll be building a modal that plays the video as soon as it is triggered, I will be adding this attribute to the launch button: And then we script the function to get and autoplay the video from Datatag, and also the function call like this:<\/p>\n That is, if you’re as lazy as me you can script it like that. If you’re not, you can place the code in a different file, and just script the file.This is what you get:<\/p>\n Using JavaScript<\/strong><\/p>\n Call a modal with id myModal with a single line of JavaScript:<\/p>\n Same as with calling modals, you can do a number of actions on modals using JavaScript. Some of the most important are toggle, show and hide.<\/p>\n Now you can go and conquer the Twitter Bootstrap’s modal.<\/p>\n This was an example of Modals using Twitter’s Bootstrap.<\/p>\n\n
HTML markup for modals<\/h2>\n
index.html<\/code> in our project’s directory, we have to give a name to our HTML document and link Bootstrap’s CSS file and script Bootstrap’s JavaScript file. So we put the name between the <title> <\/title><\/code> tags, and after it we place this code:<\/p>\n\r\n <link rel="stylesheet" href="css\/bootstrap.min.css">\r\n <script src="js\/bootstrap.min.js"><\/script>\r\n<\/pre>\n
\r\n<!-- Button trigger modal -->\r\n<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">\r\n Launch modal\r\n<\/button>\r\n<\/pre>\n
data-toggle<\/code> and data-target<\/code>. data-toggle<\/code> is the one to tell the button what to toggle when the button is clicked (in our case it’s a modal), while data-trigger<\/code> tells it which one to trigger as there can be multiple modals.<\/p>\n\r\n<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">\r\n <div class="modal-dialog">\r\n <div class="modal-content">\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<\/pre>\n
modal fade<\/code> makes the modal fade into and out of view. The id which in our case has the attribute myModal<\/code> should be the same as the id we placed in the button. You may even add a description to your modal by adding the aria-describebdy<\/code> attribute. Furthermore, I’d like to address the issue of modals disappearing when the backdrop (back overlay area) is clicked. You can make this default property go away by adding data-backdrop=\"static\"<\/code> as an attribute.<\/p>\naria-labelledby<\/code> and aria-view<\/code>. These attributes are used to make the modal more accessible (you can learn more about web accessibility here<\/a>). The other classes you see are self-explanatory.<\/p>\n<div class=\"modal-content\"><\/code> tag, we\u00a0place the whole code for the content, which is divided in three parts (remember the structure of a modal?): header, body and footer.<\/p>\n\r\n<!-- Header-->\r\n<div class="modal-header">\r\n\t<button type="button" class="close" data-dismiss="modal">\r\n\t\t<span aria-hidden="true">&times;<\/span>\r\n\t\t<span class="sr-only">Close<\/span>\r\n\t<\/button>\r\n\t<h4 class="modal-title" id="myModalLabel">Modal title<\/h4>\r\n<\/div>\r\n<\/pre>\n
<h3><\/code> tag contains the title, you also have to know that the button represents the small typical X which closes the modal when clicked. The span element inside the button contains the icon and the hidden description for it’s function, when you hover your cursor over it.<\/p>\n\r\n <!-- Body -->\r\n <div class="modal-body">\r\n Lorem ipsum ...\r\n <\/div>\r\n<\/pre>\n
<div><\/code> element with the class modal-body<\/code> and then do your thing.<\/p>\n<div><\/code> element with a modal-footer<\/code> class, containing two buttons, doing whatever you want them to do. In the following code snippet, the buttons just save changes or close the modal:<\/p>\n\r\n<!-- Footer -->\r\n<div class="modal-footer">\r\n <button type="button" class="btn btn-default" data-dismiss="modal">Close<\/button>\r\n\t<button type="button" class="btn btn-primary">Save changes<\/button>\r\n<\/div>\r\n<\/pre>\n
It doesn’t work!<\/h2>\n
boostrap.min.js<\/code> doesn’t work properly without jQuery, which can be solved by adding this part of code before bootstrap.min.js<\/code>:<\/p>\n\r\n <script src="\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.10.1\/jquery.min.js"><\/script>\r\n <script src="\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.10.3\/jquery-ui.min.js"><\/script>\r\n<\/pre>\n
hide<\/code> class has the property display: none;<\/code> which makes your modal disappear. To fix that you can instead use the custom class hide-block<\/code> with this code:<\/p>\n\r\n.hide-block{\r\n display: none;\r\n}\r\n<\/pre>\n![\"Modal](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/11\/Untitled.jpg\")
<\/a>Customize your modal<\/h2>\n
\nModals have two available classes: large and small. You can activate them by placing modifier classes on the modal-dialog<\/code> class. The modifier classes in question would be modal-lg<\/code> and modal-sm<\/code>.<\/p>\n
\nBy default, modals appear by fading into the view. You can remove this animation by simply removing the fade<\/code> class from your modal markup.<\/p>\n
\ndata-theVideo=\"http:\/\/www.youtube.com\/embed\/loFtozxZG0s\" <\/code>.
\nThen we place this code in the modal’s body:<\/p>\n<iframe width="100%" height="350" src=""><\/iframe><\/pre>\n
\r\n<script>\r\n \/\/function to get and autoplay youtube video from datatag:\r\n function autoPlayYouTubeModal(){\r\n var trigger = $("body").find('[data-toggle="modal"]');\r\n trigger.click(function() {\r\n var theModal = $(this).data( "target" ),\r\n videoSRC = $(this).attr( "data-theVideo" ),\r\n videoSRCauto = videoSRC+"?autoplay=1" ;\r\n $(theModal+' iframe').attr('src', videoSRCauto);\r\n $(theModal+' button.close').click(function () {\r\n $(theModal+' iframe').attr('src', videoSRC);\r\n });\r\n });\r\n }\r\n \/\/the function call:\r\n\r\n $(document).ready(function(){\r\n autoPlayYouTubeModal();\r\n });\r\n<\/script>\r\n<\/pre>\n![\"YouTube](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/11\/Untitled1.jpg\")
<\/a>\r\n$('#myModal').modal(options)\r\n<\/pre>\nDownload the source code for Modals<\/h2>\n