{"id":3392,"date":"2012-07-17T20:15:19","date_gmt":"2012-07-17T20:15:19","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=3392"},"modified":"2019-04-08T10:51:15","modified_gmt":"2019-04-08T10:51:15","slug":"bootstrap-modal","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/bootstrap-modal\/","title":{"rendered":"Bootstrap jQuery Modal"},"content":{"rendered":"

Utiliza el complemento Bootstrap jQuery modal<\/strong> para agregar cuadros de di\u00e1logo en tu sitio Web para lightboxes, notificaciones de usuario o contenido completamente personalizado.<\/p>\n

Bootstrap<\/strong> dispone de un componente ya preparado para que tan solo tengas que incluir las etiquetas html dentro de tu <body> y adaptarlo a tu necesidad. Eso s\u00ed, tu p\u00e1gina debe utilizar Bootstrap<\/strong> y jQuery<\/strong> para hacerlo funcionar.<\/p>\n

Este tipo de ventanas modales se pueden emplear para mostrar una fotograf\u00eda, texto, un formulario o lo que se te ocurra que no desees mostrar como contenido visible y principal.<\/p>\n

En el ejemplo en funcionamiento vamos mostrar un bot\u00f3n que abre una ventana donde se muestra un mini formulario donde puedes indicar tu email para enviarlo y procesarlo en el servidor.<\/p>\n

En primer lugar, tu p\u00e1gina debe tener todo lo necesario para utilizar Bootstrap<\/strong>. En la p\u00e1gina oficial de Bootstrap<\/strong> tienes una gu\u00eda r\u00e1pida de como agregar Bootstrap<\/strong> a tu sitio. Ver gu\u00eda de instalaci\u00f3n Bootstrap<\/a>.<\/p>\n

C\u00f3digo HTML<\/h3>\n

Una vez tengas todo lo necesario para usar Bootstrap<\/strong> en tu sitio Web, tan solo te queda a\u00f1adir el siguiente c\u00f3digo dentro del <body>:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<!-- Button trigger modal --><\/span>\n<button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-primary"<\/span> data-toggle=<\/span>"modal"<\/span> data-target<\/span>=<\/span>"#exampleModal"<\/span>><\/span>\n    Abrir ventana modal\n<\/<\/span>button<\/span><\/a>><\/span>\n \n<!-- Modal --><\/span>\n<div<\/span><\/a> class<\/span>=<\/span>"modal fade"<\/span> id<\/span>=<\/span>"exampleModal"<\/span> tabindex<\/span>=<\/span>"-1"<\/span> role=<\/span>"dialog"<\/span> aria-labelledby=<\/span>"exampleModalLabel"<\/span> aria-hidden=<\/span>"true"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"modal-dialog"<\/span> role=<\/span>"document"<\/span>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"modal-content"<\/span>><\/span>\n            <form<\/span><\/a> action<\/span>=<\/span>"index.php"<\/span> method<\/span>=<\/span>"post"<\/span>><\/span>\n                <div<\/span><\/a> class<\/span>=<\/span>"modal-header"<\/span>><\/span>\n                    <h5<\/span><\/a> class<\/span>=<\/span>"modal-title"<\/span> id<\/span>=<\/span>"exampleModalLabel"<\/span>><\/span>Hola<\/<\/span>h5<\/span><\/a>><\/span>\n                    <button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"close"<\/span> data-dismiss=<\/span>"modal"<\/span> aria-label<\/span>=<\/span>"Close"<\/span>><\/span>\n                        <span<\/span><\/a> aria-hidden=<\/span>"true"<\/span>><\/span>&times;<\/span><\/<\/span>span<\/span><\/a>><\/span>\n                    <\/<\/span>button<\/span><\/a>><\/span>\n                <\/<\/span>div<\/span><\/a>><\/span>\n                <div<\/span><\/a> class<\/span>=<\/span>"modal-body"<\/span>><\/span>\n                    <h4<\/span><\/a>><\/span>Bienvenido a la ventana modal Boostrap 4<\/<\/span>h4<\/span><\/a>><\/span>\n                    <div<\/span><\/a> class<\/span>=<\/span>"form-group"<\/span>><\/span>\n                        <label<\/span><\/a> for<\/span>=<\/span>"exampleInputEmail1"<\/span>><\/span>Email<\/<\/span>label<\/span><\/a>><\/span>\n                        <input<\/span><\/a> type<\/span>=<\/span>"email"<\/span> class<\/span>=<\/span>"form-control"<\/span> name<\/span>=<\/span>"email"<\/span> placeholder=<\/span>"Escribe tu email..."<\/span>><\/span>\n                        <small<\/span><\/a> id<\/span>=<\/span>"emailHelp"<\/span> class<\/span>=<\/span>"form-text text-muted"<\/span>><\/span>Escribe tu email. Esto es un ejemplo. Tu email no queda registrado en ningun lugar.<\/<\/span>small<\/span><\/a>><\/span>\n                    <\/<\/span>div<\/span><\/a>><\/span>\n                <\/<\/span>div<\/span><\/a>><\/span>\n                <div<\/span><\/a> class<\/span>=<\/span>"modal-footer"<\/span>><\/span>\n                    <button<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-secondary"<\/span> data-dismiss=<\/span>"modal"<\/span>><\/span>Cerrar<\/<\/span>button<\/span><\/a>><\/span>\n                    <button<\/span><\/a> type<\/span>=<\/span>"submit"<\/span> name<\/span>=<\/span>"submitSave"<\/span> class<\/span>=<\/span>"btn btn-primary"<\/span>><\/span>Guardar cambios<\/<\/span>button<\/span><\/a>><\/span>\n                <\/<\/span>div<\/span><\/a>><\/span>\n            <\/<\/span>form<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Resultado visual<\/h3>\n
Como bien puedes observar, tenemos el bot\u00f3n que abre la ventana modal y justo debajo el contenedor de la ventana con algo de contenido que hemos agregado para tener un formulario y un campo de texto para agregar el email.<\/p>\n
\"Bootstrap<\/a><\/p>\n
Los botones de acci\u00f3n que tiene esta ventana son el bot\u00f3n de cerrar o guardar cambios. Si pulsa en la \u00abx\u00bb o en el bot\u00f3n cerrar la ventana se cierra y si pulsas en el bot\u00f3n \u00abGuardar cambios\u00bb, el texto que hayas depositado en el campo email se env\u00eda al servidor para ser procesado. En este caso, el \u00fanico proceso que hacemos es mostrar el email recibido por pantalla. En ning\u00fan caso guardaremos tu email, as\u00ed que no te preocupes.<\/p>\n
C\u00f3digo PHP<\/h3>\n
Como puedes ver a continuaci\u00f3n, el c\u00f3digo PHP<\/strong> que recibe la informaci\u00f3n es muy simple:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php<\/span>\nif<\/span> (<\/span>isset<\/span><\/a>(<\/span>$_POST<\/span>[<\/span>'submitSave'<\/span>]<\/span>)<\/span>)<\/span> {<\/span>\n    if<\/span> (<\/span>$_POST<\/span>[<\/span>'email'<\/span>]<\/span> !=<\/span> ''<\/span>)<\/span> {<\/span>\n        echo<\/span> '<div class="alert alert-success" role="alert">\n                Email <strong>'<\/span>.<\/span>$_POST<\/span>[<\/span>'email'<\/span>]<\/span>.<\/span>'<\/strong> recibido correctamente!\n            <\/div>'<\/span>;<\/span>\n    }<\/span> else<\/span> {<\/span>\n        echo<\/span> '<div class="alert alert-danger" role="alert">\n                No has escrito tu email.\n            <\/div>'<\/span>;<\/span>\n    }<\/span>\n}<\/span>\n?><\/span><\/pre><\/div><\/div>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n
Esta entrada ha sido actualizada el 14\/09\/2018.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Utiliza el complemento Bootstrap jQuery modal para agregar cuadros de di\u00e1logo en tu sitio Web para agregar contenido completamente personalizado.<\/p>\n","protected":false},"author":1,"featured_media":7261,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[163,87],"class_list":["post-3392","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-bootstrap","tag-popups"],"yoast_head":"\nBootstrap jQuery Modal - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Utiliza el complemento Bootstrap jQuery modal para agregar cuadros de di\u00e1logo en tu sitio Web para agregar contenido completamente personalizado.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap jQuery Modal - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Utiliza el complemento Bootstrap jQuery modal para agregar cuadros de di\u00e1logo en tu sitio Web para agregar contenido completamente personalizado.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/bootstrap-modal\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-07-17T20:15:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-08T10:51:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/bootstrap-jquery-modal.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/bootstrap-modal\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/bootstrap-modal\/\",\"name\":\"Bootstrap jQuery Modal - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/bootstrap-modal\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/bootstrap-modal\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/bootstrap-jquery-modal.png\",\"datePublished\":\"2012-07-17T20:15:19+00:00\",\"dateModified\":\"2019-04-08T10:51:15+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Utiliza el complemento Bootstrap jQuery modal para agregar cuadros de di\u00e1logo en tu sitio Web para agregar contenido completamente personalizado.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/bootstrap-modal\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/bootstrap-modal\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/bootstrap-modal\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/bootstrap-jquery-modal.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/bootstrap-jquery-modal.png\",\"width\":250,\"height\":250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/bootstrap-modal\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap jQuery Modal\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap jQuery Modal - Jose Aguilar Blog","description":"Utiliza el complemento Bootstrap jQuery modal para agregar cuadros de di\u00e1logo en tu sitio Web para agregar contenido completamente personalizado.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Bootstrap jQuery Modal - Jose Aguilar Blog","og_description":"Utiliza el complemento Bootstrap jQuery modal para agregar cuadros de di\u00e1logo en tu sitio Web para agregar contenido completamente personalizado.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/bootstrap-modal\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-07-17T20:15:19+00:00","article_modified_time":"2019-04-08T10:51:15+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/bootstrap-jquery-modal.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/bootstrap-modal\/","url":"https:\/\/www.jose-aguilar.com\/blog\/bootstrap-modal\/","name":"Bootstrap jQuery Modal - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/bootstrap-modal\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/bootstrap-modal\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/bootstrap-jquery-modal.png","datePublished":"2012-07-17T20:15:19+00:00","dateModified":"2019-04-08T10:51:15+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Utiliza el complemento Bootstrap jQuery modal para agregar cuadros de di\u00e1logo en tu sitio Web para agregar contenido completamente personalizado.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/bootstrap-modal\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/bootstrap-modal\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/bootstrap-modal\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/bootstrap-jquery-modal.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/07\/bootstrap-jquery-modal.png","width":250,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/bootstrap-modal\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Bootstrap jQuery Modal"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=3392"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3392\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7261"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=3392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=3392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=3392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}