Create Dynamic Modal Dialog Form in AdminLTE Bootstrap template

How to create Dynamic modal dialog form bootstrap

Create modal dialog form in jquery using bootstrap framework, slightly different from the usual way of jquery-ui. In bootstrap tutorial, we create modal dialog form like the example below

Some of the rules on the use of the bootstrap modals as quoted on the bootstrap’s official website is as follows

Overlapping modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

Modal markup placement
Always try to place a modal’s HTML code in a top-level position in your document to avoid other components affecting the modal’s appearance and/or functionality.

Mobile device caveats
There are some caveats regarding using modals on mobile devices.

Let’s try to create a dynamic modal form in the bootstrap
1. Make sure you have adminLTE bootstrap template, please download from the official website.
2. In bootstrap, we have 3 optional modal form dialog sizes (Large,Standart,Small).
3. There are 3 classes in the modal-dialog content creation

4. Create php file as modals.php and copy this code below

To create dynamic modal dialog form ,we need create javascript function , copy this javascript code in above “</body>” code

Very fun to create a website using bootstrap as web templates. Similarly, how to create a dynamic modal dialog form using bootstrap adminLTE. Click here to see demo or visit here to read my another bootstrap tutorial

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

5 Comments

 Add your comment
  1. terima kasih gan, ini bekerja

  2. Hi, any chance to pass a php variable to the modal from the button? Thanks

    • hello,
      You can add new code in button onclick like example below

      $variable_a=1; //php variable here //

      onClick=”open_container(‘// php variable here //’);”

      add new script at function open_container like below
      function open_container(value)
      {
      alert(value);
      }

      I hope this helps 🙂

  3. hi, I want passing PHP variable (example: $_GET[id]) to Bootstraps modal (read from MySQL by GET method) without Javascript, how I can this? many thanks!

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.