Bootstrap之BootstrapDialog

时间  2019-11-18
标签 bootstrap bootstrapdialog 栏目 Bootstarp 繁體版
原文   原文链接

Make use of Bootstrap's modal more monkey-friendly.

参考地址：http://nakupanda.github.io/bootstrap3-dialog/javascript

模态弹框：css

<div class="modal fade">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Modal title</h4>
 </div>
 <div class="modal-body">
 <p>One fine body…</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-primary">Save changes</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Dialog弹出层：

        BootstrapDialog.alert('I want banana!');
 

 

Exampleshtml

Simplest

 

只提供信息显示，并保持全部其余事情默认。java

        BootstrapDialog.show({ message: 'Hi Apple!' });

Dialog Title

 

 
 
        BootstrapDialog.show({ title: 'Say-hello dialog', message: 'Hi Apple!' });
 

 


    

 

 

操做对话标题
 

 

 
 
        BootstrapDialog.show({ title: 'Default Title', message: 'Click buttons below.', buttons: [{ label: 'Title 1', action: function(dialog) { dialog.setTitle('Title 1'); } }, { label: 'Title 2', action: function(dialog) { dialog.setTitle('Title 2'); } }] });
 

 


    

 

操做对话信息
 

 

 
 
        BootstrapDialog.show({ title: 'Default Title', message: 'Click buttons below.', buttons: [{ label: 'Message 1', action: function(dialog) { dialog.setMessage('Message 1'); } }, { label: 'Message 2', action: function(dialog) { dialog.setMessage('Message 2'); } }] });
 

 


    

 

 

加载远程页面(1)
 

 
 
        BootstrapDialog.show({ message: $('<div></div>').load('remote.html') });
 

 

加载远程页面 (2)
 

 
 
 BootstrapDialog.show({ message: function(dialog) { var $message = $('<div></div>'); var pageToLoad = dialog.getData('pageToLoad'); $message.load(pageToLoad); return $message; }, data: { 'pageToLoad': 'remote.html' } });
 

 


    

 

Buttons
 

 
 
        BootstrapDialog.show({ message: 'Hi Apple!', buttons: [{ label: 'Button 1' }, { label: 'Button 2', cssClass: 'btn-primary', action: function(){ alert('Hi Orange!'); } }, { icon: 'glyphicon glyphicon-ban-circle', label: 'Button 3', cssClass: 'btn-warning' }, { label: 'Close', action: function(dialogItself){ dialogItself.close(); } }] });
 

 


    

 

操做Buttons
 

经过bootstrapdialog建立按钮有一些额外的功能：
 $button.toggleEnable(true|false); 
 $button.enable(); // 至关于 $button.toggleEnable(true); 
 $button.disable(); // 至关于  $button.toggleEnable(false); 
 $button.toggleSpin(true|false); 
 $button.spin(); // 至关于 $button.toggleSpin(true);
 $button.stopSpin(); // 至关于  $button.toggleSpin(false);git
 

 
 
        BootstrapDialog.show({ title: 'Manipulating Buttons', message: function(dialog) { var $content = $('<div><button class="btn btn-success">Revert button status right now.</button></div>'); var $footerButton = dialog.getButton('btn-1'); $content.find('button').click({$footerButton: $footerButton}, function(event) { event.data.$footerButton.enable(); event.data.$footerButton.stopSpin(); dialog.setClosable(true); }); return $content; }, buttons: [{ id: 'btn-1', label: 'Click to disable and spin.', action: function(dialog) { var $button = this; // 'this' here is a jQuery object that wrapping the <button> DOM element. $button.disable(); $button.spin(); dialog.setClosable(false); } }] });
 

 


    

 

 

按钮的热键
 

试着按下面的按钮。
最后一个按钮被禁用，因此没有事情发生，当按下热键。
请注意，若是您的对话框中有一些须要键盘操做的组件，可能会出现冲突，您能够尝试下一个示例。github
 

 
 
        BootstrapDialog.show({ title: 'Button Hotkey', message: 'Try to press some keys...', onshow: function(dialog) { dialog.getButton('button-c').disable(); }, buttons: [{ label: '(A) Button A', hotkey: 65, // Keycode of keyup event of key 'A' is 65. action: function() { alert('Finally, you loved Button A.'); } }, { label: '(B) Button B', hotkey: 66, action: function() { alert('Hello, this is Button B!'); } }, { id: 'button-c', label: '(C) Button C', hotkey: 67, action: function(){ alert('This is Button C but you won\'t see me dance.'); } }] });
 

 


    

 

 
 

建立 dialog 实例
 

BootstrapDialog.show(...) 只是一个快捷方式，若是你须要对话框实例，用“新”。bootstrap
 

 
 

        
        // Using init options var dialogInstance1 = new BootstrapDialog({ title: 'Dialog instance 1', message: 'Hi Apple!' }); dialogInstance1.open(); // Construct by using setters var dialogInstance2 = new BootstrapDialog(); dialogInstance2.setTitle('Dialog instance 2'); dialogInstance2.setMessage('Hi Orange!'); dialogInstance2.setType(BootstrapDialog.TYPE_SUCCESS); dialogInstance2.open(); // Using chain callings var dialogInstance3 = new BootstrapDialog() .setTitle('Dialog instance 3') .setMessage('Hi Everybody!') .setType(BootstrapDialog.TYPE_INFO) .open();
 

 


    

 

事实上BootstrapDialog.show(...) 也将返回建立的对话框实例。app
 

 
 

        
        // You can use dialogInstance later. var dialogInstance = BootstrapDialog.show({ message: 'Hello Banana!' });
 

 

Button with identifier
 

 
 

        
        var dialog = new BootstrapDialog({ message: 'Hi Apple!', buttons: [{ id: 'btn-1', label: 'Button 1' }] }); dialog.realize(); var btn1 = dialog.getButton('btn-1'); btn1.click({'name': 'Apple'}, function(event){ alert('Hi, ' + event.data.name); }); dialog.open();
 

 


    

 

较大的对话框
 

默认状况下，对话框的大小是 'size-normal' 或 BootstrapDialog.SIZE_NORMAL, 但你能够经过设置选项的 'size' 的'size-large' 或BootstrapDialog.SIZE_LARGE.ide
 

 
 

        
        BootstrapDialog.show({ size: BootstrapDialog.SIZE_LARGE, message: 'Hi Apple!', buttons: [{ label: 'Button 1' }, { label: 'Button 2', cssClass: 'btn-primary', action: function(){ alert('Hi Orange!'); } }, { icon: 'glyphicon glyphicon-ban-circle', label: 'Button 3', cssClass: 'btn-warning' }, { label: 'Close', action: function(dialogItself){ dialogItself.close(); } }] });
 

 


    

 

 

More dialog sizes
 

Please note that specifying BootstrapDialog.SIZE_WIDE is equal to using css class 'modal-lg' on Bootstrap Modal.ui
 

 
 

        
        BootstrapDialog.show({ title: 'More dialog sizes', message: 'Hi Apple!', buttons: [{ label: 'Normal', action: function(dialog){ dialog.setTitle('Normal'); dialog.setSize(BootstrapDialog.SIZE_NORMAL); } }, { label: 'Small', action: function(dialog){ dialog.setTitle('Small'); dialog.setSize(BootstrapDialog.SIZE_SMALL); } }, { label: 'Wide', action: function(dialog){ dialog.setTitle('Wide'); dialog.setSize(BootstrapDialog.SIZE_WIDE); } }, { label: 'Large', action: function(dialog){ dialog.setTitle('Large'); dialog.setSize(BootstrapDialog.SIZE_LARGE); } }] });
 

 


    

 

更多信息
 

bootstrapdialog支持显示丰富的内容，因此你甚至能够使用一个视频剪辑你的对话框中的消息。
 

 
 
        
        var $textAndPic = $('<div></div>'); $textAndPic.append('Who\'s this? <br />'); $textAndPic.append('<img src="./images/pig.ico" />'); BootstrapDialog.show({ title: 'Guess who that is', message: $textAndPic, buttons: [{ label: 'Acky', action: function(dialogRef){ dialogRef.close(); } }, { label: 'Robert', action: function(dialogRef){ dialogRef.close(); } }] });
 

 


    

 

Dialog closable / unclosable
 

If option 'closable' is set to false, the default closing behaviors will be disabled, but you can still close the dialog by using dialog.close().
 

 
 

        
        BootstrapDialog.show({ message: 'Hi Apple!', closable: false, buttons: [{ label: 'Dialog CLOSABLE!', cssClass: 'btn-success', action: function(dialogRef){ dialogRef.setClosable(true); } }, { label: 'Dialog UNCLOSABLE!', cssClass: 'btn-warning', action: function(dialogRef){ dialogRef.setClosable(false); } }, { label: 'Close the dialog', action: function(dialogRef){ dialogRef.close(); } }] });
 

 


    

 

 

关闭对话框的更多控件
 


    

 

 
 
 
  
 
   
 
    
默认状况下，当选择 'closable' 设置为true，对话框能够经过这些方式关闭：点击在对话框中，按ESC键，点击对话框标题右侧的关闭图标。
 
   
 
  
 
 
 

 

若是你想让你的对话框关闭时，对话框标题的关闭图标被点击，能够设置的选项 'closeByBackdrop' and 'closeByKeyboard' 为 false.
 

 
 

        
        BootstrapDialog.show({ message: 'Hi Apple!', message: 'You can not close this dialog by clicking outside and pressing ESC key.', closable: true, closeByBackdrop: false, closeByKeyboard: false, buttons: [{ label: 'Close the dialog', action: function(dialogRef){ dialogRef.close(); } }] });
 

 

 

Confirm
 

　　BootstrapDialog.confirm('Hi Apple, are you sure?');

 

Confirm with callback
 

        BootstrapDialog.confirm('Hi Apple, are you sure?', function(result){ if(result) { alert('Yup.'); }else { alert('Nope.'); } });
 

 
 

 
 

Available options
 

 

 Please note that all options described below are optional, but you will have a weird dialog if you don't even give it a message to display. 
 Most options can be set via init options or property setters. 
 

 
  
  
 
    Option  
    Possible values  
    Description  
  
 
  
  
  
 
   type 
    BootstrapDialog.TYPE_DEFAULT or 'type-default' 
 BootstrapDialog.TYPE_INFO or 'type-info' 
 BootstrapDialog.TYPE_PRIMARY or 'type-primary' (default) 
 BootstrapDialog.TYPE_SUCCESS or 'type-success' 
 BootstrapDialog.TYPE_WARNING or 'type-warning' 
 BootstrapDialog.TYPE_DANGER or 'type-danger' 		 
    Give your dialog a specific look, color scheme can be seen on Bootstrap's Button.  
  
 
  
 
   size 
    BootstrapDialog.SIZE_NORMAL or 'size-normal' (default) 
 BootstrapDialog.SIZE_WIDE or 'size-wide' 
 BootstrapDialog.SIZE_LARGE or 'size-large' 
 		 
    -  
  
 
  
 
   cssClass 
    -  
    Additional css classes that will be added to your dialog.  
  
 
  
 
   title 
    String or Object(html)  
    -  
  
 
  
 
   message 
    String or Object(html)  
    -  
  
 
  
 
   buttons 
    array  
   Examples: 
    
 
     

BootstrapDialog.show({ title: 'Say-hello dialog', message: 'Hello world!', buttons: [{ id: 'btn-ok', icon: 'glyphicon glyphicon-check', label: 'OK', cssClass: 'btn-primary', autospin: false, action: function(dialogRef){ dialogRef.close(); } }] });
 
    
 		 
  
 
  

 

 
 
 
   
   
 
     
     

         
     
 id: optional, if id is set, you can use dialogInstance.getButton(id) to get the button later. 
 icon: optional, if set, the specified icon will be added to the button. 
 cssClass: optional, additional css class to be added to the button. 
 autospin: optinal, if it's true, after clicked the button a spinning icon appears. 
 action: optional, if provided, the callback will be invoked after the button is clicked, and the dialog instance will be passed to the callback function. 		 
   
 
   
 
    closable 
     true | false  
     When set to true, you can close the dialog by: 
 
     
     
      
  • Clicking the close icon in dialog header.
    •  
      
  • Clicking outside the dialog.
    •  
      
  • ESC key.
    •  
     
 		 
   
 
   
 
    spinicon 
     Icon class name, for example 'glyphicon glyphicon-check'. 
 Default value is 'glyphicon glyphicon-asterisk'. 		 
     Specify what icon to be used as the spinning icon when button's 'autospin' is set to true.  
   
 
   
 
    data 
     Key-value object. For example {'id' : '100'}  
     Data to be bound to the dialog.  
   
 
   
 
    onshow 
     function  
     If provided, it will be invoked when the dialog is popping up. 
 		 
   
 
   
 
    onshown 
     function  
     If provided, it will be invoked when the dialog is popped up. 
 		 
   
 
   
 
    onhide 
     function  
     If provided, it will be invoked when the dialog is popping down. 
 		 
   
 
   
 
    onhidden 
     function  
     If provided, it will be invoked when the dialog is popped down. 
 		 
   
 
   
 
    autodestroy 
     true (default) | false  
     When it's true, all modal stuff will be removed from the DOM tree after the dialog is popped down, set it to false if you need your dialog (same instance) pups up and down again and again.  
   
 
   
 
    description 
     String  
     If provided, 'aria-describedby' attribute will be added to the dialog with the description string as its value. This can improve accessibility, as the description can be read by screen readers.  
   
 
   
 
    nl2br 
     true | false  
     Automatically convert line breaking character to <br /> if it's set to true, everything keeps original if it's false.  
   
 
   
 
 
  
 
Available methods
 
 
 
 
 
   
   
 
     Method  
     Description  
   
 
   
   
   
 
    open() 
    Open the dialog. Usage: dialogInstance.open() 
   
 
   
 
    close() 
    Close the dialog. Usage: dialogInstance.close() 
   
 
   
 
    getModal() 
    Return the raw modal, equivalent to $('<div class='modal fade'...></div>') 
   
 
   
 
    getModalDialog() 
    Return the raw modal dialog. 
   
 
   
 
    getModalContent() 
    Return the raw modal content. 
   
 
   
 
    getModalHeader() 
    Return the raw modal header. 
   
 
   
 
    getModalBody() 
    Return the raw modal body. 
   
 
   
 
    getModalFooter() 
    Return the raw modal footer. 
   
 
   
 
    getData(key) 
    Get data entry according to the given key, returns null if no data entry found. 
   
 
   
 
    setData(key, value) 
    Bind data entry to dialog instance, value can be any types that javascript supports. 
   
 
   
 
    enableButtons(boolean) 
    Disable all buttons in dialog footer when it's false, enable all when it's true. 
   
 
   
 
    setClosable(boolean) 
    When set to true (default), dialog can be closed by clicking close icon in dialog header, or by clicking outside the dialog, or, ESC key is pressed. 
   
 
   
 
    realize() 
    Calling dialog.open() will automatically get this method called first, but if you want to do something on your dialog before it's shown, you can manually call dialog.realize() before calling dialog.open(). 
   
 
   
 
 
 
 
 Go to the project. | 
 Contact me if you can help to improve this example page. 



        

            

        	





    

		

            
相关文章

            

                

                

                    

                

            


            
相关标签/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公众号
    

    

           欢迎关注本站公众号,获取更多信息

        
    




    

    




	


	







    

        联系我们
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程