{"id":4660,"date":"2019-05-16T17:53:19","date_gmt":"2019-05-16T12:23:19","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=4660"},"modified":"2019-05-17T09:52:09","modified_gmt":"2019-05-17T04:22:09","slug":"bootstrap-modals","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/bootstrap-modals\/","title":{"rendered":"Bootstrap &#8211; Modals"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">Bootstrap &#8211; Modals<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">Date posted: 16\/05\/2019<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">Introduction<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Modal component is used to display popup window on the current page. which is used to provide important information to the user Button or a link is used to trigger the modal window.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Example of BS3 code:<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n  &lt;title&gt;Model in bootstrap&lt;\/title&gt;\n  &lt;meta charset=\"utf-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.0\/css\/bootstrap.min.css\"&gt;\n  <a href=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.0\/jquery.min.js\" target=\"_blank\" rel=\"noopener\">https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.0\/jquery.min.js<\/a>\n  <a href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.0\/js\/bootstrap.min.js\" target=\"_blank\" rel=\"noopener\">https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.0\/js\/bootstrap.min.js<\/a>\n&lt;\/head&gt;\n&lt;body&gt;\n\n<div class=\"container\">\n  <h2>Modal Example<\/h2>\n  <!-- Trigger the modal with a button -->\n  <button type=\"button\" class=\"btn btn-info btn-sm\" data-toggle=\"modal\" data-target=\"#myModal\">click to view the student1<\/button><br><br>\n  <button type=\"button\" class=\"btn btn-info btn-sm\" data-toggle=\"modal\" data-target=\"#myModa11\">click to view the student2<\/button><br><br>\n  <button type=\"button\" class=\"btn btn-info btn-sm\" data-toggle=\"modal\" data-target=\"#myModa12\">click to view the student3<\/button><br><br>\n  <!-- Modal -->\n  <div class=\"modal fade\" id=\"myModal\" role=\"dialog\">\n    <div class=\"modal-dialog\">\n    \n      <!-- Modal content-->\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\">\u00d7<\/button>\n          <h4 class=\"modal-title\">Modal Header<\/h4>\n        <\/div>\n        <div class=\"modal-body\">\n        \t<table border=\"3px;\">\n            \t<tr> <td> Sno<\/td><td>Sname<\/td><td>Student city<\/td><\/tr>\n                <tr> <td>1<\/td><td>xxx<\/td><td>city1<\/td><\/tr>\n            <\/table>\n        <\/div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close<\/button>\n        <\/div>\n      &lt;\/div&gt;\n      \n    &lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;!-- Modal --&gt;\n  <div class=\"modal fade1\" id=\"myModa11\" role=\"dialog\">\n    <div class=\"modal-dialog\">\n    \n      <!-- Modal content-->\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\">\u00d7<\/button>\n          <h4 class=\"modal-title\">Modal Header<\/h4>\n        <\/div>\n        <div class=\"modal-body\">\n        \t<table border=\"3px;\">\n            \t<tr> <td> Sno<\/td><td>Sname<\/td><td>Student city<\/td><\/tr>\n                <tr> <td>2<\/td><td>yyy<\/td><td>city2<\/td><\/tr>\n            <\/table>\n        <\/div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close<\/button>\n        <\/div>\n      &lt;\/div&gt;\n      \n    &lt;\/div&gt;\n  &lt;\/div&gt;\n   &lt;!-- Modal --&gt;\n  <div class=\"modal fade1\" id=\"myModa12\" role=\"dialog\">\n    <div class=\"modal-dialog\">\n    \n      <!-- Modal content-->\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\">\u00d7<\/button>\n          <h4 class=\"modal-title\">Modal Header<\/h4>\n        <\/div>\n        <div class=\"modal-body\">\n        \t<table border=\"3px;\">\n            \t<tr> <td> Sno<\/td><td>Sname<\/td><td>Student city<\/td><\/tr>\n                <tr> <td>3<\/td><td>zzz<\/td><td>city3<\/td><\/tr>\n            <\/table>\n        <\/div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close<\/button>\n        <\/div>\n      &lt;\/div&gt;\n      \n    &lt;\/div&gt;\n  &lt;\/div&gt;\n  \n  \n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Output:<\/h4>\n\n\n\n<ul class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><li class=\"blocks-gallery-item\"><figure><img fetchpriority=\"high\" decoding=\"async\" width=\"715\" height=\"291\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/blogmodel-1.png\" alt=\"\" data-id=\"4685\" data-link=\"https:\/\/pheonixsolutions.com\/blog\/?attachment_id=4685\" class=\"wp-image-4685\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/blogmodel-1.png 715w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/blogmodel-1-300x122.png 300w\" sizes=\"(max-width: 715px) 100vw, 715px\" \/><\/figure><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"279\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/blogmodel1-1024x279-1-1024x279.png\" alt=\"\" class=\"wp-image-4686\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/blogmodel1-1024x279-1.png 1024w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/blogmodel1-1024x279-1-300x82.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/blogmodel1-1024x279-1-768x209.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Thanks for using\u00a0<a href=\"https:\/\/pheonixsolutions.com\/\">pheonix solutions<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You find this tutorial helpful? Share with your friends to keep it alive.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bootstrap &#8211; Modals Date posted: 16\/05\/2019 Introduction Modal component is used to display popup window on the current page. which [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[657],"class_list":["post-4660","post","type-post","status-publish","format-standard","hentry","category-web-architecture","tag-modal","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-1da","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/4660","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=4660"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/4660\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=4660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=4660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=4660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}