+ Start a Discussion
Kumar Saurav 44Kumar Saurav 44 

Once I click on Submit button, a Browser message should open which should have the option of "Agree" and "Disagree" and Save Button. How do I go about doing this?

Once I click on Submit button on a visualforce page, a Browser message should open which should have the option of "Agree" and "Disagree" and Save Button. How do I go about doing this?
Best Answer chosen by Kumar Saurav 44
bhanu_prakashbhanu_prakash
Hi Kumar,
Mark as best answer, If it resloves !!
you can use check these below code works on visualforce pages
<apex:page showHeader="false" lightningStylesheets="true">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<apex:slds />
<div class="slds">

<div class="slds-modal" aria-hidden="false" role="dialog" id="modal">
<div class="slds-modal__container">
<div class="slds-modal__header">
    <button class="slds-button slds-button--icon-inverse slds-modal__close" onclick="closeModal()">
      <span class="slds-assistive-text">Close</span>
    </button>
    <h2 class="slds-text-heading--medium">Modal Header</h2>
  </div>
  <div class="slds-modal__content slds-p-around--medium">
    <div>
      <p> Please check terms and conditions </p>
    </div>
  </div>
  <div class="slds-modal__footer">
    <button class="slds-button slds-button--neutral" onclick="closeModal()">Disagree</button>
    <button class="slds-button slds-button--neutral slds-button--brand" onclick="closeModal()">Agree</button>
    <button class="slds-button slds-button--neutral slds-button--brand">Save</button>
  </div>
</div>
</div>
<div class="slds-backdrop" id="backdrop"></div>

<!-- Button To Open Modal -->
<button class="slds-button slds-button--brand" id="toggleBtn" >Open Modal</button>
</div>

<!-- Modal Toggle Script -->
<script>
j$ = jQuery.noConflict();

//Modal Open
j$('#toggleBtn').click(function(){
  j$('#backdrop').addClass('slds-backdrop--open');
  j$('#modal').addClass('slds-fade-in-open');
});

//Modal Close
function closeModal(){
  j$('#modal').removeClass('slds-fade-in-open');
  j$('#backdrop').removeClass('slds-backdrop--open');
}
</script>
</apex:page>

Mark as resloved if it helps :) :)
Thanks, 
Bhanu Prakash
visit ForceLearn.com (https://www.forcelearn.com/)  ​ 

All Answers

bhanu_prakashbhanu_prakash
Hi Kumar,
Mark as best answer, If it resloves !!
you can use check these below code works on visualforce pages
<apex:page showHeader="false" lightningStylesheets="true">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<apex:slds />
<div class="slds">

<div class="slds-modal" aria-hidden="false" role="dialog" id="modal">
<div class="slds-modal__container">
<div class="slds-modal__header">
    <button class="slds-button slds-button--icon-inverse slds-modal__close" onclick="closeModal()">
      <span class="slds-assistive-text">Close</span>
    </button>
    <h2 class="slds-text-heading--medium">Modal Header</h2>
  </div>
  <div class="slds-modal__content slds-p-around--medium">
    <div>
      <p> Please check terms and conditions </p>
    </div>
  </div>
  <div class="slds-modal__footer">
    <button class="slds-button slds-button--neutral" onclick="closeModal()">Disagree</button>
    <button class="slds-button slds-button--neutral slds-button--brand" onclick="closeModal()">Agree</button>
    <button class="slds-button slds-button--neutral slds-button--brand">Save</button>
  </div>
</div>
</div>
<div class="slds-backdrop" id="backdrop"></div>

<!-- Button To Open Modal -->
<button class="slds-button slds-button--brand" id="toggleBtn" >Open Modal</button>
</div>

<!-- Modal Toggle Script -->
<script>
j$ = jQuery.noConflict();

//Modal Open
j$('#toggleBtn').click(function(){
  j$('#backdrop').addClass('slds-backdrop--open');
  j$('#modal').addClass('slds-fade-in-open');
});

//Modal Close
function closeModal(){
  j$('#modal').removeClass('slds-fade-in-open');
  j$('#backdrop').removeClass('slds-backdrop--open');
}
</script>
</apex:page>

Mark as resloved if it helps :) :)
Thanks, 
Bhanu Prakash
visit ForceLearn.com (https://www.forcelearn.com/)  ​ 
This was selected as the best answer
Kumar Saurav 44Kumar Saurav 44
After we click on "Agree" option on the browser message, it should change the content of the page but it should render on the same page. How do we go about doing it?