function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Rals ChaddaRals Chadda 

Bootstrap modal

HI ,

i want to use bootstrap modal which on click of custom button "Open modal", itshould open a pop - up ..

i used this code from repositorm bt when i click on button "Open Modal" the pop up dosent work, nothing happens .

any help ?

<apex:page >

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
 <apex:stylesheet value="{!URLFOR($Resource.bootstrap, 'bootstrap-3.2.0-dist/css/bootstrap.min.css')}"/>
  <apex:includeScript value="{!URLFOR($Resource.bootstrap, 'bootstrap-3.2.0-dist/js/bootstrap.js')}"/> 
    <apex:includeScript value="{!URLFOR($Resource.bootstrap, 'bootstrap-3.2.0-dist/js/bootstrap.min.js')}"/> 
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>
</apex:page>
Best Answer chosen by Rals Chadda
SarfarajSarfaraj
jQuery is a required dependency for bootstrap. You have to include jQuery before including bootstrap. You don't need to include both bootstrap.js and bootstrap.min.js. Either one will do. Also you may consider using public CDNs. Here is the modified version of your code that will work, 
<apex:page >

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
 <apex:stylesheet value="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
  <apex:includeScript value="//code.jquery.com/jquery-2.1.4.min.js"/> 
  <apex:includeScript value="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"/> 
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>
</apex:page>

 

All Answers

SarfarajSarfaraj
jQuery is a required dependency for bootstrap. You have to include jQuery before including bootstrap. You don't need to include both bootstrap.js and bootstrap.min.js. Either one will do. Also you may consider using public CDNs. Here is the modified version of your code that will work, 
<apex:page >

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
 <apex:stylesheet value="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
  <apex:includeScript value="//code.jquery.com/jquery-2.1.4.min.js"/> 
  <apex:includeScript value="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"/> 
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>
</apex:page>

 
This was selected as the best answer
Rals ChaddaRals Chadda

Kudos ! it works .
i understand where I went wrong likeI am not able to understand
 

<apex:stylesheet value="{!URLFOR($Resource.bootstrap, 'bootstrap-3.2.0-dist/css/bootstrap.min.css')}"/>
  <apex:includeScript value="{!URLFOR($Resource.bootstrap, 'bootstrap-3.2.0-dist/js/bootstrap.js')}"/> 
    <apex:includeScript value="{!URLFOR($Resource.bootstrap, 'bootstrap-3.2.0-dist/js/bootstrap.min.js')}"/>


As you said either of the two we csn use bootstrap .js or bootstrap.min.js ? is it so bcz both perform same functionality or something else.

Also , why Is it necessary to use jquery when we use bootstrap modal

 

Thanks A ton !
 man
SarfarajSarfaraj
bootstrap and bootstrap.min both contains same code. First one is the uncompressed readable code, while the later is minified code which will load into your page faster. You should use uncompressed version if you you need to customize bootstrap plugin to meet your requirement. In production you should always use the minified version as it will improve your page load time. 

Bootstrap is build using jQuery. So bootstrap needs jQuery plugin to be included in your page. Also it depends in which order you included them. You have to include jQuery first and then bootstrap.
Rals ChaddaRals Chadda
Well explained !!!