Skip to content
Fix Code Error

How to open a Bootstrap modal window using jQuery?

March 13, 2021 by Code Error
Posted By: Anonymous

I’m using Twitter Bootstrap modal window functionality. When someone clicks submit on my form, I want to show the modal window upon clicking the “submit button” in the form.

<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit"/>
</form>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

jQuery:

$('#myform').on('submit', function(ev) {
    $('#my-modal').modal({
        show: 'false'
    }); 


    var data = $(this).serializeObject();
    json_data = JSON.stringify(data);
    $("#results").text(json_data); 
    $(".modal-body").text(json_data); 

    // $("#results").text(data);

    ev.preventDefault();
});

Solution

Bootstrap has a few functions that can be called manually on modals:

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

You can see more here: Bootstrap modal component

Specifically the methods section.

So you would need to change:

$('#my-modal').modal({
    show: 'false'
}); 

to:

$('#myModal').modal('show'); 

If you’re looking to make a custom popup of your own, here’s a suggested video from another community member:

https://www.youtube.com/watch?v=zK4nXa84Km4

Answered By: Anonymous

Related Articles

  • polymer paper-dialog within paper-dialog
  • Do not close the mode in the mouse up event
  • Change the Bootstrap Modal effect
  • Navbar not filling width of page when reduced to mobile view
  • Polymer paper-dialog: how can I know when an…
  • After a little scroll, the sticky navbar just is not…
  • Simple Popup by using Angular JS
  • Form field border-radius is not working only on the…
  • Select2 doesn't work when embedded in a bootstrap modal
  • Is CSS Turing complete?
  • How to separate Polymer button and dialog
  • How to reset the bootstrap modal when it gets closed…
  • Fix top buttons on scroll of list below
  • Confirm deletion in modal / dialog using Twitter Bootstrap?
  • Set focus on a input control contained in a second…
  • Bootstrap modal not displaying
  • Uncaught TypeError: Cannot read property 'length' of…
  • Wrong focus after closing a 2nd modal
  • Bootstrap 3 modal pattern with Ember.js
  • Vuejs use modal component twice on same page
  • Send parameter to Bootstrap modal window?
  • Polymer paper-dialog not showing up on click in chrome
  • Multiple modals overlay
  • Simplest PHP example for retrieving user_timeline…
  • How to validate email id in angularJs using ng-pattern
  • Sort table rows In Bootstrap
  • Is it possible to apply CSS to half of a character?
  • Polymer paper-dropdown-menu not rendered correctly…
  • What are the new features in C++17?
  • When I use '/js/app.js' on my Laravel view my…
  • How to implement a Navbar Dropdown Hover in Bootstrap v4?
  • Sorting A Table With Tabs & Javascript
  • Can't pass Vue variable to hidden input v-model in…
  • Display Bootstrap Modal using javascript onClick
  • Vue.js Display call one component from another component
  • How to use html template with vue.js
  • Aurelia bundling issue with virtual directory
  • How to dynamically add and remove form fields in Angular 2
  • Find the nth element in vue-test-utils
  • laravel remove old excel file after upload new excel…
  • Expanded calendar in modal
  • boostrap modal not updating with vue js v2 two way binding
  • Not able to show modal using imageUrl
  • How to add an event after close the modal window?
  • Trying to keep dropdown menus flush to the edge of…
  • Jquery open popup on button click for bootstrap
  • Polymer data binding with Javascript and attributes
  • Table row edit function is not working in angular
  • Polymer paper-dialog backdrop opacity?
  • Reload content in modal (twitter bootstrap)
  • Bootstrap 3 and Youtube in Modal
  • Keep button focused when using mulitple button groups
  • Style jQuery autocomplete in a Bootstrap input field
  • Vuejs: How to use `v-b-modal directive` in BootstrapVue?
  • Bootstrap Modal immediately disappearing
  • laravel vuejs/axios put request Formdata is empty
  • Convert Vue.JS project to Nuxt.JS project
  • Typeerror: n is undefined in underscore.min.js
  • Bootstrap nav pills for VueJS vue-router
  • How to pass a "function pointer"/ event to a child…
  • How to prevent scrolling the whole page?
  • Open bootstrap modal in new tab
  • Add a popup modal to vuetify vue.js
  • How to get Navigation drawer clipped under dialog…
  • Jquery fadeToggle Trouble
  • VueJS how to rerender a component
  • Bootstrap 3 with remote Modal
  • Bootstrap Modal before form Submit
  • Vue.js open modal by click of a button
  • Twitter Bootstrap Datepicker within modal window
  • paper-dialog stretching off screen
  • Polymer Pass Variables from Element to Event…
  • Aurelia is emitting different css code in Foundation…
  • How to add 'load more' functionality to items on a…
  • I have these 2 tonnage calculators. The first one is…
  • Updating Table With User Information from Modal Popup
  • How to use Servlets and Ajax?
  • Vue - closing dialog from child component
  • How do access to vee-validate errors and clear them…
  • Webpack: Unable to find module with ID: main --…
  • Why is Ember throwing "Uncaught Error: Assertion…
  • Closing Material UI Dialog from child component…
  • How to access elements of a JArray (or iterate over them)
  • How to get form data from ember checkboxes
  • How to dismiss the dialog with click on outside of…
  • javascript .replace and .trim not working in vuejs
  • What is the purpose of the "role" attribute in HTML?
  • How do I make it so my bot doesn't send "role given"…
  • How to resize Twitter Bootstrap modal dynamically…
  • VueJS: Cannot read property 'name' of undefined"
  • Javascript text animation not triggering
  • Bootstrap modal: is not a function
  • Property or method "key" is not defined on the…
  • Active tab issue on page load HTML
  • Validation not getting triggered when value is changed
  • Vue.js AJAX call inside Modal
  • Incorporate JQuery-file-upload to application
  • Generic Aurelia dialog needs Save enabled when dirty…
  • Vuejs Component slot in inline template with props
  • How to POST the data from a modal form of Bootstrap?

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Which equals operator (== vs ===) should be used in JavaScript comparisons?

Next Post:

CSS opacity only to background color, not the text on it?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error