I'm tring to make the popup (model form) automatically show when I visit a website , I dont know what are the problems in there in that code

Question

1.00/5 (1 vote)

See more:

This is my modal code i don't know why it's not work properly

HTML

<div class="modal fade in" id="overlay" style="padding-right: 17px">
  <div class="modal-dialog">
    <div class="modal-content">
    
      <div class="modal-body">
        <div class="modal-header">

          ×

           ×</button >
                        <h3 class="modal-title">Blumen</h3>
                    </div>
             
<p style="text-align: center; padding: 10px 0 0 0; font-size: 13px">Please enter the details below to get the detailed pricing information.</p>
                         <div class="row">
                                

                                <div class="col-md-12 col-sm-6 col-xs-12">
                                    <div class="form-group">
                                        
                                    </div>
                                </div>
                                <div class="col-md-12 col-sm-6 col-xs-12">
                                    <div class="form-group">
                                                        
                                </div>
                            </div>
                                <div class="col-md-12 col-sm-6 col-xs-12 padd-15px">
                                    <div class="form-group">
                                        
                                    </div>
                                </div>
                                
                                <div class="col-md-12 col-sm-6 col-xs-12">
                                    Send
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        
                        <div class="modal-footer">
          Close
        </div>
                        </div>
    </div>
  </div>
</div>

What I have tried:

i want to make popup model automatically come when i visit a web.
I don't know how can i do.

Hope you can understand me.

Posted 27-Jul-18 1:38am

Vishal Parmar

Updated 27-Jul-18 3:00am

Bryian Tan

v2

Add a Solution

Comments

Richard Deeming 27-Jul-18 7:59am

If you want someone to help you fix your code, you need to show us the relevant parts of your code, and tell us what the problem is.

Click the green "Improve question" link and edit your question. Add the relevant parts of your code, and the full details of any errors from the browser console.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Bryian Tan · Answer 1 · 2018-07-27T03:00:00

Solution 1

You can add a JavaScript to do so.

JavaScript

<script type="text/javascript">
	$(document).ready(function(){
		$("#overlay").modal('show');
	});
</script>

Here how it look like by adding the script to your posted markup
Tryit Editor v3.5[^]

Here is an example:
https://www.tutorialrepublic.com/codelab.php?topic=faq&file=show-bootstrap-modal-on-page-load

Posted 27-Jul-18 3:00am

Bryian Tan

Comments

Richard Deeming 27-Jul-18 9:10am

NB: $(document).ready(fn); has been deprecated since v3. The recommended syntax is $(fn);

.ready() | jQuery API Documentation[^]

Bryian Tan 27-Jul-18 9:23am

Thanks.

Vishal Parmar 27-Jul-18 9:17am

thankyou for replay me.
i added the script but form is can't display

Bryian Tan 27-Jul-18 9:25am

hmmm. Is tough to tell what going on in your environment. What version of Bootstrap/jQuery the application is using?

Vishal Parmar 27-Jul-18 9:34am

jquery/1.7.2/jquery.min.js.
bootstrap leatest version.
done

Bryian Tan 27-Jul-18 11:01am

have you try copy the example from the links and run it from your environment?