Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Basic one...modal on start up

    Ok, so getting in to web programming. Newbie question this i'm sure. Have googled the question and tried example code, but no joy I'm afraid.

    I am simply using a bootstrap template for now, with jquery and bootstrap included. I have included their example code for a modal form. It all works when I use the "button" to enable the modal form. When i try and code this so that it loads on page load, it simply doesnt run....

    Any tips:

    modal code is:

    Code:
            <!-- Button to trigger modal -->
    	<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
           <!-- this doesnt work :-( -->
    	<script>$('#myModal').modal('show')</script>	
    	
    	<!-- 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>
    Cheers, Col

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    you may need to simply move the script block, below the element on the page, as technically when you are calling the modal the modal element doesnt exist yet.

    Code:
            <!-- Button to trigger modal -->
    	<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
           <!-- this doesnt work :-( -->
    	
    	
    	<!-- 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>
    
    <script>$('#myModal').modal('show')</script>
    if that doesnt work you should be looking for page errors. if that doesnt help post the modal code itself or a link to the documentation for the modal script you chose ( there are alot out there)

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    In order to make the modal appear you need to have this code in the js:
    Code:
    <script type="text/javascript">
    $('#myModal').modal('show')
    </script>
    Total code:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type='text/javascript' src='js/jquery.js'></script>
    <script type='text/javascript' src='js/bootstrap.js'></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    </head>
    
    <body>
    <!-- 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>
    <script type="text/javascript">
    $('#myModal').modal('show')
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •